
To create a range slider you need to use the input tag type range (<input type=”range”>) that specifies a control for entering a number whose exact value is not important. The default range is 0 to 100:
<!DOCTYPE html>
<html>
<body>
<form action="">
<label for="vol">Number between 0 and 100:</label>
<input type="range" id="vol" name="vol" min="0" max="100">
<input type="submit">
</form>
</body>
</html>
Output:
To create the custom range slider add some CSS:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.range-slider-container {
width: 100%;
}
.range-slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #e9c46a;
outline: none;
border-radius:40px;
opacity: 0.8;
transition: opacity .2s;
}
.range-slider:hover {
opacity: 1;
}
.range-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 25px;
height: 25px;
border-radius:50%;
background-color: #e76f51;
cursor: pointer;
}
.range-slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius:50%;
background-color: #e76f51;
cursor: pointer;
}
</style>
</head>
<body>
<div class="range-slider-container">
<input type="range" min="0" max="100" value="50" class="range-slider" id="range">
</div>
</body>
</html>
Output:
To display the current value add the JavaScript to the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.range-slider-container {
width: 100%;
}
.range-slider {
-webkit-appearance: none;
width: 100%;
height: 25px;
background: #e9c46a;
outline: none;
border-radius:40px;
opacity: 0.8;
transition: opacity .2s;
}
.range-slider:hover {
opacity: 1;
}
.range-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 25px;
height: 25px;
border-radius:50%;
background-color: #e76f51;
cursor: pointer;
}
.range-slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius:50%;
background-color: #e76f51;
cursor: pointer;
}
p {position: relative; left:45%;}
</style>
</head>
<body>
<div class="range-slider-container">
<input type="range" min="0" max="100" value="50" class="range-slider" id="range">
<p>Value: <span id="example"></span></p>
</div>
<script>
var randgeSlider = document.getElementById("range");
var val = document.getElementById("example");
val.innerHTML = randgeSlider.value;
randgeSlider.oninput = function() {
val.innerHTML = this.value;
}
</script>
</body>
</html>
Output:
Enjoy coding!
Read also:
CSS & JavaScript Bee Progress Bar