Range Slider Uisng Javascript and CSS for changing the selected part Color

Hello all,

You all would have seen many blogs and videos creating range slider using JQuery. But most of us encountered this situation in production code to create it using Plain JavaScript only.

So here is the solution guys. In this tutorial we will go on to create a input range slider using plain JavaScript. Which can thus be added to any framework of JavaScript.

Also in this tutorial we will do the CSS part of it also to make the selected part different in color then the background one. Stay calm we will do it.

Objective: To create a range slider which have its selected part highlighted with different color.

Lets get started.

Understanding Input type="range"

Input type="range" is represented using a slider rather than a textbox as in number type.

Note: If your browser doesn't support the type range then it will fall back and show normal text input.

Create a folder and add your index.html, style.css and script.js files.

Now in your index.html file add the basic html5 markup and this input tag:

Here as you see type is range and we have min, max and value. What are these?

Min: It is the minimum value of the range slider.
Max: It is the maximum value of the range slider.
Value: It is the default value of the range slider when it is run fresh.

So we have our range slider working and I will let you know the use of JS and CSS files shortly which is very important to meet our objective. 

Changing the CSS of as per the objective

Now In your script.js file add this code:

In this code we have an anonymous function which is calculating the value as per the values assigned to the input tag attributes by default and the function onRangeChange() which is called when we change the range slider which do the same thing as of the anonymous function. Both the function change the CSS for the range slider as per the calculated value.

Now in your CSS file add this code 

Now when you open your index.html file in browser you will see the left part of the range slider in different color and as you drag it to either left or right you will notice that the color is also getting placed along with the slider.

This is it for this tutorial.

Will come back with another JavaScript solution of some common Problem.

Till then GoodBye and Take Care. :)