DEV Community: Anand Vijay

How to build a custom input range slider

Anand Vijay — Sat, 28 Oct 2023 10:32:07 +0000

1. Introduction

Today we are going to build a customised input range slider. In HTML we have an input tag that has many types. One of those types is range. Now although it is a useful accessory, often we struggle to get it to match with the rest of our UI. So lets get started.

2. HTML

So for the layout of the slider lets have two buttons that add and subtract value from the range and obviously the slider itself in between.

Now add this to your HTML file.

<div class="range">
  <div class="rangeAction">-</div>
  <input type="range" class="slider" min="0" max="100" value="0">
  <div class="rangeAction">+</div>
</div>

In the HTML above, we have a parent div element that contains all the elements of the slider. Within that container we have two action containers with the plus and minus sign as their text content. And finally we also have the input tag with the following attributes:

type : Denotes the type of the input (In this case ,range)
min: Minimum value of the slider
max: Maximum value of the slider
value: Initial value of the slider

3. CSS

Now the most important and interesting part of this article, the CSS. Now let give a base style to the parent container.

.range{
  display:flex;
  justify-content:"center";
  align-items:"center";
  height:100px;
}

Now lets add styling to the action containers

.rangeAction{
  background-color:white;
  width:50px;
  height:50px;
  cursor:pointer;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:50%;
  border:1px solid #c2c2c2
}

Now that the action containers are ready , let us move on to the slider. First we'll give the slider some base styles and then style the range indicator. So for the slider give it the following styles.

.slider {
  -webkit-appearance: none;
  width: 90%;
  margin-left:20px;
  margin-right:20px;
  height: 10px;
  border-radius:50px;
  background: #d3d3d3;
  margin-top:40px;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

Now to adjust the range indicator we will apply styles to it using the ::-webkit-slider-thumb selector added to our .slider class.

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 75px;
  height: 75px;
  background: white;
  border:10px solid blue;
  cursor: pointer;
}

Now that the styling is complete lets add the relevant functionality to the plus and minus buttons.

4. JavaScript

First we need select the buttons and the slider using DOM

let actionButtons=document.getElementsByClassName("rangeAction")
let minus=actionButtons[0]
let plus=actionButtons[1]
let slider=document.querySelector("[type=range]")

Now that all the required elements are selected lets add onclick events to the plus and minus buttons.

minus.onclick=function(e){
  slider.value=parseInt(slider.value)-5
}

plus.onclick=function(e){
    slider.value=parseInt(slider.value)+5
}

Here I have provided a value change of 5. You can change that according to you requirements.

Result

Now you should have an input range slider that looks like this.

Congratulations, you have now successfully learnt to create a custom range slider.

Lets talk about A-Frame

Anand Vijay — Sat, 21 Oct 2023 13:27:32 +0000

Introduction

A-Frame is essentially a web framework that can be used to create a VR experience on top of your HTML. How cool is that? A-Frame is compatible with most VR headsets including the GearVR and Oculus Go.

Why A-Frame?

Easy Setup

A-Frame handles all the boilerplate setup to create the 3D experience for you. All you have to do to begin is create an HTML file , add a <script> tag with the A-Frame CDN and then drop <a-scene> tag and voila. Your initial VR scene is ready.

Its like coding in HTML

So A-Frame follows a concept of declarative HTML and since HTML is easy to read and understand , A-Frame is accessible to everyone.

Works on multiple devices

Now A-frame like mentioned earlier works on most VR headsets but you also have the comfort of using them on a normal desktop or even a smartphone.

Entity Component Architecture

While we code on top of HTML that is just one cool feature. The developer simultaneously has access to Javascript , DOM , Three.js , WebVR and WebGL.

Visual Inspector

Now as a front end developer myself I highly appreciate the use of developer tools to allow me to inspect elements. A-Frame provides a Visual Inspector of its own that allows us to view/inspect the various aspects of the scene. We can open the scene using <ctrl> + <alt> + i or <ctrl> + <option> + i

Lets build our first Scene

Now lets create our first VR scene on A-Frame.

Create an HTML file the following structure

<html>
    <head>

    </head>
    <body>

    </body>
</html>

In the <head> tag add the A-Frame CDN

<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>

Inside your body tag add an <a-scene> tag.

Now that the initial setup is done we can start by adding elements to the scene.

Now we need to create an assets section using the <a-assets>. Inside the a-assets section is where we add all our assets like images and videos. Remember to provide each asset with an id attribute as we use this ID to point to the asset wherever we require it.

So lets begin with a background image . Let's add a random panoramic Image I found online with the id="background".

Now let's add an a-sky element with src pointing to this image like so.

<a-sky src="#background"></a-sky>

Now once you run the html file your Vr scene should look like this.

and your code will look like this.

<html>
    <head>
        <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
    </head>
    <body>
        <a-scene>
            <a-assets>
                <img src="./background.jpg" id="background"/>
            </a-assets>
            <a-sky src="#background"></a-sky>
        </a-scene>
    </body>
</html>

Now lets add some shapes to the Scene. A-Frame provides use with some primitive elements to use in the scene. For now lets add a box and a sphere. Add the following code

<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>

The position attribute determines the position of the element in the scene using x-y-z coordinates.

Now your scene should look like this.

And your final code should look like this.

<html>
    <head>
        <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
    </head>
    <body>
        <a-scene>
            <a-assets>
                <img src="./background.jpg" id="background"/>
            </a-assets>
            <a-sky src="#background"></a-sky>
            <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> 

        </a-scene>
    </body>
</html>

Conclusion

You have successfully created your first scene using A-Frame.
I hope this articles helps more front-end developers like me understand how easily a VR scene can be created. Thank You.