Creating a Custom Animated Range Slider using HTML, CSS & JavaScript

A range slider lets the user to select a range of value within a specified minimum and maximum value. In this blog, you will learn how to create a custom animated range slider using HTML, CSS and JavaScript. 

HTML

<div class="range-input">
  <input type="range" min="0" max="100" value="0" step="10">
  <div class="value">
    <div></div>
  </div>
</div>

CSS

body {
  background:#4471ef;
  font-family:"Raleway",sans-serif;
}
.range-input {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  background:#eee;
  padding:10px 20px;
  display:flex;
  align-items:center;
  border-radius:10px;
}
.range-input input {
  -webkit-appearance:none;
  width:200px;
  height:2px;
  background:#4471ef;
  border:none;
  outline:none;
}
.range-input input::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:20px;
  height:20px;
  background:#eee;
  border:2px solid #4471ef;
  border-radius:50%;
}
.range-input input::-webkit-slider-thumb:hover {
  background:#4471ef;
}
.range-input .value {
  color:#4471ef;
  text-align:center;
  font-weight:600;
  line-height:40px;
  height:40px;
  overflow:hidden;
  margin-left:10px;
}
.range-input .value div {
  transition:all 300ms ease-in-out;
}

JS

let rangeInput = document.querySelector(".range-input input");
let rangeValue = document.querySelector(".range-input .value div");

let start = parseFloat(rangeInput.min);
let end = parseFloat(rangeInput.max);
let step = parseFloat(rangeInput.step);

for(let i=start;i<=end;i+=step){
  rangeValue.innerHTML += '<div>'+i+'</div>';
}

rangeInput.addEventListener("input",function(){
  let top = parseFloat(rangeInput.value)/step * -40;
  rangeValue.style.marginTop = top+"px";
});