Creating A Range Slider in HTML using JavaScript
Range Sliders are used on web pages to allow the user specify a numeric value which must be no less than a given value, and no more than another given value. That is, it allows to choose value from a range which is represented as a slider.
A Range slider is typically represented using a slider or dial control rather than a text entry box like the “number” input type. It is used when the exact numeric value isn’t required to input. For example, the price slider in the filter menu of products list at flipkart.com
Creating a Range Slider
We can create a Range Slider using simple HTML and JavaScript by following the below steps:
Step 1:Creating an HTML element.
The slider element is defined in this step using the “div” element under which is a input field whose range is defined between 1 and 100.
< div class = "rangeslider" > < input type = "range" min = "1" max = "100" value = "10" class = "myslider" id = "sliderRange" > </ div > |
Step 2:Adding CSS to the slider element.
-
Define the width of the outside container.
.rangeslider{ width: 50%; }
-
Define CSS for the slider like height, width, background, opacity etc for the slider.
.myslider { -webkit-appearance: none; background: #FCF3CF ; width: 50%; height: 20px; opacity: 2; }
-
Add Mouse hovering effects.
.myslider:hover { opacity: 1; }
-
Add WebKit for browsers to change the default look of range sliders.
.myslider::-webkit-slider-thumb { -webkit-appearance: none; cursor: pointer; background: #34495E ; width: 5%; height: 20px; }
Step 3:Addition of JavaScript to the slider element.
Add the below JavaScript code to display the default slider value.
var rangeslider = document.getElementById("sliderRange"); var output = document.getElementById("demo"); output.innerHTML = rangeslider.value; rangeslider.oninput = function() { output.innerHTML = this.value; }
Step 4:Combine the above elements.
<!DOCTYPE html> < html > < style > .rangeslider{ width: 50%; } .myslider { -webkit-appearance: none; background: #FCF3CF ; width: 50%; height: 20px; opacity: 2; } .myslider::-webkit-slider-thumb { -webkit-appearance: none; cursor: pointer; background: #34495E ; width: 5%; height: 20px; } .myslider:hover { opacity: 1; } </ style > < body > < h1 >Example of Range Slider Using Javascript</ h1 > < p >Use the slider to increment or decrement value.</ p > < div class = "rangeslider" > < input type = "range" min = "1" max = "100" value = "10" class = "myslider" id = "sliderRange" > < p >Value: < span id = "demo" ></ span ></ p > </ div > < script > var rangeslider = document.getElementById("sliderRange"); var output = document.getElementById("demo"); output.innerHTML = rangeslider.value; rangeslider.oninput = function() { output.innerHTML = this.value; } </ script > </ body > </ html > |
Output:
Recommended Posts:
- JavaScript | Creating a Custom Image Slider
- Creating Progress Bar using JavaScript
- HTML Course | Creating Navigation Menu
- HTML Course - Starting the Project | Creating Directories
- jQuery UI | Slider
- How to place the image above the slider in mobile view in bootstrap?
- How to generate random number in given range using JavaScript?
- HTML | DOM Input Range name Property
- HTML | DOM Input Range min Property
- HTML | DOM Input Range value Property
- HTML | DOM Input Range Object
- HTML | DOM Input Range max Property
- HTML | <input type="range">
- HTML | DOM Input Range type Property
- HTML | DOM Input Range autocomplete Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.