HTML & CSS Range Sliders

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:

Value:

Enjoy coding!

Share this: