Create a Custom Range Slider using HTML, CSS & JavaScript

In this post we will see how we can create a custom range slider using HTML CSS & JavaScript. The moment we change thumb of slider, the it's range value is reflected in label.

HTML

<div class="slider">
  <input type="range" min="0" max="100" value="20" oninput="rangeValue.innerText = this.value">
  <p id="rangeValue">20</p>
</div>

CSS

body {
  background:#dce6ea;
}
.slider {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:250px;
  height:30px;
  padding:20px;
  background:#f5f5f5;
  border:1px solid #00acee;
  border-radius:20px;
  display:flex;
  align-items:center;
  box-shadow:0px 10px 20px rgba(0,0,0,0.15);
}
.slider p {
  font-size:18px;
  font-weight:600;
  font-family:sans-serif;
  padding-left:20px;
  color:#00acee;
}
.slider input[type="range"] {
  -webkit-appearance:none !important;
  width:200px;
  height:1px;
  background:#00acee;
  border:none;
  outline:none;
}
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none !important;
  width:20px;
  height:20px;
  background:#f5f5f5;
  border:2px solid #00acee;
  border-radius:50%;
  cursor:pointer;
}
.slider input[type="range"]::-webkit-slider-thumb:hover {
  background:#00acee;
}