HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>setPointerCapture touch</title>
  <style>
    body { font-family: sans-serif; margin: 1rem; }
    #slider {
      width: 280px; height: 14px; background: #e5e7eb; border-radius: 7px;
      position: relative; touch-action: none; margin: 24px 0;
    }
    #thumb {
      position: absolute; top: -10px; left: 0;
      width: 32px; height: 32px; background: #ea580c; border-radius: 50%;
      touch-action: none; cursor: grab;
    }
    #note { font-family: monospace; font-size: 13px; }
  </style>
</head>
<body>
  <p>Drag thumb (try on touch device). touch-action: none prevents page scroll.</p>
  <div id="slider"><div id="thumb"></div></div>
  <pre id="note">—</pre>
  <script>
    var slider = document.getElementById("slider");
    var thumb = document.getElementById("thumb");
    thumb.addEventListener("pointerdown", function (ev) {
      thumb.setPointerCapture(ev.pointerId);
      document.getElementById("note").textContent = "capture set — drag freely";
    });
    thumb.addEventListener("pointermove", function (ev) {
      var rect = slider.getBoundingClientRect();
      var x = Math.min(Math.max(ev.clientX - rect.left - 16, 0), rect.width - 32);
      thumb.style.left = x + "px";
    });
    thumb.addEventListener("pointerup", function (ev) {
      thumb.releasePointerCapture(ev.pointerId);
      document.getElementById("note").textContent = "capture released";
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element.setPointerCapture — touch-action (Try It)