<div class="range">
  <div class="custom">
    <div class="circle">
      <div class="value"><span>20</span></div>
    </div>
  </div>
  <input type="range" min="20" max="600" value="20" class="rng">
</div>
* {
  margin: 0;
  padding: 0;
}

.range {
  width: 600px;
  margin: 100px auto;
  position: relative;
}

.range input[type="range"] {
  display: block;
  width: 100%;
  position: relative;
  z-index: 10;
  top: -3px;
  opacity: 0;
}

.custom {
  width: 600px;
  height: 10px;
  background: blue;
  border-radius: 6px;
  position: absolute;
}

.circle {
  position: absolute;
  top: 50%;
  left: 20px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: red;
  transform: translate(-50%, -50%);
}

.circle:active {
  transform: translate(-50%, -50%) scale(1.1);
}

.value {
  position: absolute;
  top: -30px;
  left: 0;
}

.value span {
  display: inline-block;
  transform: translateX(-20%);
}
let value = document.querySelector(".rng");

value.addEventListener("input", function () {
  document.querySelector(".value span").innerHTML = value.value;
  document.querySelector(".circle").style.left = value.value - 10 + "px";
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.