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
Creating A Range Slider In HTML using JavaScript
On web pages, range sliders are used to let users specify a numeric number that must fall between a specified value and not more than that value. In other words, it enables selection of a value from a range that is shown as a slider.
Instead of a text entry box like the "number" input type, a Range slider is often represented by a slider or dial control. When an exact numerical value is not required, it is utilized. However, it may be more difficult than you think to add a slider widget to a web page. Yes, you can just use an <input> element that is of type range. Before we dive into the article let’s a quick view on the <input type=” range”>.
HTML <input type= “range”>
A control for entering a number where the exact value is not critical (similar to a slider control) is defined with the <input type="range"> tag. By default, it has a range of 0 to 100. With the attributes listed below, you can restrict the types of numbers that are permitted.
max − It indicates the maximum value allowed
min − It indicates the minimum value allowed
step − It indicates the legal number intervals
value − It indicates the default value
Example
In the following example, we are going to create a round range slider using the border-radius property.
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
-webkit-appearance: none;
width: 100%;
height: 10px;
background: #ABEBC6;
opacity: 0.8;
}
.tutorial:hover {
opacity: 0.5;
}
.tutorial::-webkit-slider-thumb {
appearance: none;
width: 20px;
height: 20px;
border-radius: 60%;
background: #DE3163;
cursor: pointer;
}
</style>
</head>
<body style="text-align:center">
<h2 style="font-family:verdana">Round Range Slider</h2>
<div class="slidecontainer">
<input type="range" min="0" max="100" value="10" class="tutorial" id="tp">
<p style="color:#6C3483 ">Current Value : <span id="work"></span></p>
</div>
<script>
var x = document.getElementById("tp");
var a = document.getElementById("work");
a.innerHTML = x.value;
x.oninput = function() {
a.innerHTML = this.value;
}
</script>
</body>
</html>
When we execute the above code, it will generate an output consisting of the round range slider displayed on the webpage. When the user slides the slider, it will display the number that the slider is currently pointing at.
Example
Considering the following example, we are going to create an image range slider on the webpage.
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
-webkit-appearance: none;
width: 100%;
height: 50px;
background: #DE3163;
opacity: 0.5;
transition: opacity .3s;
}
.tutorial:hover {
opacity: 2;
}
.tutorial::-webkit-slider-thumb {
-webkit-appearance: none;
width: 150px;
height: 190px;
background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoBZtgd1G271O9xwDDuwfU3uBS5C_CNpBpgg&usqp=CAU');
cursor: pointer;
}
</style>
</head>
<body>
<h2 style="font-family:verdana">Image Range Slider</h2>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="slidecontainer">
<input type="range" min="5" max="100" value="15" class="tutorial" id="tp">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>Current Value : <span id="work"></span>
</p>
</div>
<script>
var x = document.getElementById("tp");
var a = document.getElementById("work");
a.innerHTML = x.value;
x.oninput = function() {
a.innerHTML = this.value;
}
</script>
</body>
</html>
On running the above code, the output window will pop up, displaying the image range slider on the webpage. When the user moves the image, it indicates the value at which the slider is stopped.
38 Views
