Discrete Snap-Stop Slider — HTML CSS JS Snippet

<div class="dss-wrap">
  <label class="dss-label">Shipping speed</label>
  <div class="dss-track-wrap">
    <div class="dss-track">
      <div class="dss-fill" id="dssFill"></div>
      <button class="dss-stop" data-i="0" style="left:0%"></button>
      <button class="dss-stop" data-i="1" style="left:33.33%"></button>
      <button class="dss-stop" data-i="2" style="left:66.66%"></button>
      <button class="dss-stop" data-i="3" style="left:100%"></button>
      <div class="dss-thumb" id="dssThumb" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="3" aria-valuenow="0"></div>
    </div>
  </div>
  <div class="dss-ticks" id="dssTicks"></div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f6f7f9;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.dss-wrap{width:100%;max-width:380px}
.dss-label{display:block;font-size:12.5px;font-weight:700;color:#4b5563;margin-bottom:18px}
.dss-track-wrap{padding:0 2px}
.dss-track{position:relative;height:5px;border-radius:6px;background:#e5e7eb}
.dss-fill{position:absolute;top:0;left:0;height:100%;border-radius:6px;background:#6366f1;width:0%;transition:width .25s cubic-bezier(.4,0,.2,1)}
.dss-stop{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:#d1d5db;border:2px solid #f6f7f9;transform:translate(-50%,-50%);cursor:pointer;z-index:1}
.dss-thumb{position:absolute;top:50%;left:0%;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #6366f1;box-shadow:0 2px 8px rgba(15,23,42,.2);transform:translate(-50%,-50%);cursor:grab;transition:left .25s cubic-bezier(.4,0,.2,1);z-index:2}
.dss-thumb:active{cursor:grabbing}
.dss-thumb:focus-visible{outline:2px solid #6366f1;outline-offset:3px}
.dss-ticks{display:flex;justify-content:space-between;margin-top:12px}
.dss-ticks span{font-size:11px;font-weight:600;color:#9ca3af;transition:color .2s}
.dss-ticks span.active{color:#6366f1}

var LABELS = ['Standard', 'Express', 'Overnight', 'Same-Day'];
var track = document.querySelector('.dss-track');
var thumb = document.getElementById('dssThumb');
var fill = document.getElementById('dssFill');
var ticksWrap = document.getElementById('dssTicks');
var count = LABELS.length;
var current = 0;

LABELS.forEach(function (label, i) {
  var t = document.createElement('span');
  t.textContent = label;
  ticksWrap.appendChild(t);
});
var tickEls = document.querySelectorAll('.dss-ticks span');

function render() {
  var pct = (current / (count - 1)) * 100;
  thumb.style.left = pct + '%';
  fill.style.width = pct + '%';
  thumb.setAttribute('aria-valuenow', current);
  thumb.setAttribute('aria-valuetext', LABELS[current]);
  tickEls.forEach(function (t, i) { t.classList.toggle('active', i === current); });
}

function setIndex(i) {
  current = Math.max(0, Math.min(count - 1, i));
  render();
}

document.querySelectorAll('.dss-stop').forEach(function (stop) {
  stop.addEventListener('click', function () { setIndex(parseInt(stop.dataset.i, 10)); });
});

tickEls.forEach(function (t, i) {
  t.style.cursor = 'pointer';
  t.addEventListener('click', function () { setIndex(i); });
});

function pctFromEvent(clientX) {
  var rect = track.getBoundingClientRect();
  var x = Math.max(0, Math.min(rect.width, clientX - rect.left));
  return x / rect.width;
}

var dragging = false;

function onMove(e) {
  if (!dragging) return;
  var clientX = e.touches ? e.touches[0].clientX : e.clientX;
  var pct = pctFromEvent(clientX);
  var nearest = Math.round(pct * (count - 1));
  if (nearest !== current) setIndex(nearest);
}

function startDrag(e) {
  dragging = true;
  thumb.style.transition = 'none';
  onMove(e);
}

function endDrag() {
  if (!dragging) return;
  dragging = false;
  thumb.style.transition = '';
  render();
}

thumb.addEventListener('pointerdown', startDrag);
window.addEventListener('pointermove', onMove);
window.addEventListener('pointerup', endDrag);
thumb.addEventListener('touchstart', startDrag, { passive: true });
window.addEventListener('touchmove', onMove, { passive: true });
window.addEventListener('touchend', endDrag);

thumb.addEventListener('keydown', function (e) {
  if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { setIndex(current + 1); e.preventDefault(); }
  else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { setIndex(current - 1); e.preventDefault(); }
  else if (e.key === 'Home') { setIndex(0); e.preventDefault(); }
  else if (e.key === 'End') { setIndex(count - 1); e.preventDefault(); }
});

render();