Creating A Range Slider in HTML using JavaScript - GeeksforGeeks

03 Dec, 2018
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;
}

Define the width of the outside container..rangeslider{
    width: 50%;
    }

.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;
   }

.myslider {
    -webkit-appearance: none;
    background: #FCF3CF  ;
    width: 50%;
    height: 20px;
    opacity: 2;
   }

Add Mouse hovering effects..myslider:hover {
    opacity: 1;
}

.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;
}

.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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-Misc
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?