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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<div class="rangeslider">
  <input type="range" min="1" max="100" value="10"
                 class="myslider" id="sliderRange">
</div>

chevron_right


Step 2:Adding CSS to the slider element.

  1. Define the width of the outside container.



    .rangeslider{
        width: 50%;
        }
    

  2. 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;
       }
    
  3. Add Mouse hovering effects.

    .myslider:hover {
        opacity: 1;
    }
    
  4. 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:




My Personal Notes arrow_drop_up

I am a technology enthusiast who has a keen interest in programming I am pursuing Engineering in Computer Science from GEU, Dehradun I like to unwind by watching movies and English sitcomsI have a keen interest in music

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.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.