<div class="custom custom1">
  <div class="view">
    <div class="data">1%</div>
  </div>
  <input type="range" class="range" min="1" max="100" value="1">
</div>

<div class="custom custom2">
  <div class="view">
    <div class="data">3%</div>
  </div>
  <input type="range" class="range" min="1" max="100" value="3">
</div>
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap");

.custom {
  width: 480px;
  position: relative;
  margin-top: 50px;
  margin-left: 30px;
}

.view {
  position: relative;
  width: 100%;
  height: 20px;
  background: linear-gradient(orange 85%, #ccc 55%);
  border-radius: 20px;
}

.range {
  width: 100%;
  position: absolute;
  top: 0;
  opacity: 0;
}

.data {
  display: block;
  position: absolute;
  transform: translateX(-50%) translateY(-15%);
  top: -50%;
  left: -50%;
  width: 50px;
  height: 50px;
  background: #ccc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #222;
  font-size: 12px;
  font-family: "Nunito", sans-serif;
  pointer-events: none;
  user-select: none;
  cursor: pointer;
  box-shadow: 0 0 12px #111;
}
/*

document.querySelectorAll(".custom").forEach(function (elem) {
  let data = elem.querySelector(".data");

  elem.querySelector(".range").addEventListener("input", function () {
    data.innerHTML = this.value + "%";
    data.style.left = this.value + "%";
  });
});

*/

document.querySelectorAll(".custom").forEach(function (elem) {
  const data = elem.querySelector(".data");
  const range = elem.querySelector(".range");

  range.addEventListener("input", onInputHandle);

  function onInputHandle() {
    data.innerHTML = range.value + "%";
    data.style.left = range.value + "%";
  }

  onInputHandle();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.