Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add a Range Slider using HTML?
With the use of sliders, users can browse and choose a value (or range) from a bar's range. They are perfect for changing settings like brightness and volume or for using image filters. Sliders can employ icons to depict a numerical or relative scale at either end of the bar. Icons can be used to convey a value's range or its characteristics, such as its nature as a volume change.
Let's dive into the article for getting better understanding on adding a range slider using HTML. This can be done by using the <input type="range"> HTML tag.
HTML <input> Tag
Users can enter a numeric number into <input> elements of type range that must fall between a given value and a maximum value. However, the exact value is not thought to be significant. Instead of a text entry box like the numeric input type, a slider or dial control is generally used to represent this.
Syntax
Following is the syntax for <input type="range">
<input type="range">
Let's look into the following examples for getting more understanding on adding a range slider using HTML.
Example
In the following example, we are going to add the simple range slider to our webpage.
<!DOCTYPE html>
<html>
<body>
<div>
<p>Default Range Slider:</p>
<input type="range" min="1" max="100" value="50">
</div>
</body>
</html>
On running the above code, it will generate an output consisting of range slider displayed on the webpage.
Example
Following is the example where we are going to run the script and display the user-picked value from the slider.
<!DOCTYPE html>
<html>
<head>
<style>
.sliderbox {
width: 90%;
}
.slider {
-webkit-appearance: none;
width: 90%;
height: 25px;
background: #D0ECE7;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 3;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: #7D3C98;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: #7D3C98;
cursor: pointer;
}
</style>
</head>
<body>
<p>Change The Value Using Slider</p>
<div class="sliderbox">
<input type="range" min="1" max="99" value="32" class="slider" id="tutorial1">
<p>Value: <span id="tutorial"></span></p>
</div>
<script>
var slider = document.getElementById("tutorial1");
var result = document.getElementById("tutorial");
result.innerHTML = slider.value;
slider.oninput = display() {
result.innerHTML = this.value;
}
</script>
</body>
</html>
When the above script gets executed, the output window will pop up, displaying the customized slider on the webpage with a default value. When the user slides the slider, the event gets triggered and displays the slider position value.
Example
Consider the following example, where we are going to make the slider round by using the border-radius property.
<!DOCTYPE html>
<html>
<head>
<style>
.slidecontainer {
width: 90%;
}
.slider {
-webkit-appearance: none;
width: 90%;
height: 20px;
border-radius: 6px;
background: #DFFF00;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 26px;
height: 26px;
border-radius: 50%;
background: #145A32;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 26px;
height: 26px;
border-radius: 50%;
background: #145A32;
cursor: pointer;
}
</style>
</head>
<body>
<p>Choose The Value:</p>
<div class="slidecontainer">
<input type="range" min="1" max="99" value="49" class="slider" id="tutorial1">
<p>Value: <span id="tutorial"></span></p>
</div>
<script>
var slider = document.getElementById("tutorial1");
var result = document.getElementById("tutorial");
result.innerHTML = slider.value;
slider.oninput = function() {
result.innerHTML = this.value;
}
</script>
</body>
</html>
On running the above script, the output window will pop up, displaying the slider of the round shape along with a default value on the webpage. When the user slides the slider, the event gets triggered and displays the slide position value on the webpage.
242 Views
To Continue Learning Please Login