HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>offsetX — percent</title>
  <style>
    #track {
      width: 300px;
      height: 28px;
      border-radius: 999px;
      background: #e2e8f0;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    #fill {
      height: 100%;
      width: 0%;
      background: #0d9488;
    }
  </style>
</head>
<body>
  <div id="track"><div id="fill"></div></div>
  <p id="out">Clicked at —%</p>
  <script>
    var track = document.getElementById("track");
    var fill = document.getElementById("fill");
    var out = document.getElementById("out");
    track.addEventListener("click", function (e) {
      var width = track.clientWidth || 1;
      var percent = Math.min(100, Math.max(0, (e.offsetX / width) * 100));
      fill.style.width = percent + "%";
      out.textContent = "Clicked at " + percent.toFixed(1) + "%";
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

MouseEvent.offsetX — percent (Try It)