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: