Elastic Bounce-Back Range Slider — HTML CSS JS Snippet

<div class="ebr-wrap">
  <div class="ebr-track" id="ebrTrack">
    <div class="ebr-fill" id="ebrFill"></div>
    <div class="ebr-thumb" id="ebrThumb" tabindex="0" role="slider" aria-label="Value" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"></div>
  </div>
  <div class="ebr-readout" id="ebrReadout">50</div>
  <p class="ebr-hint">Drag past either end — the track stretches, then springs back.</p>
</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}
.ebr-wrap{width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:10px}
.ebr-track{position:relative;width:100%;height:8px;border-radius:8px;background:#e5e7eb;transform-origin:center;will-change:transform}
.ebr-fill{position:absolute;top:0;left:0;height:100%;border-radius:8px;background:#6366f1;width:50%}
.ebr-thumb{position:absolute;top:50%;left:50%;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid #6366f1;box-shadow:0 2px 8px rgba(15,23,42,.25);transform:translate(-50%,-50%);cursor:grab;touch-action:none}
.ebr-thumb:active{cursor:grabbing}
.ebr-thumb:focus-visible{outline:2px solid #6366f1;outline-offset:3px}
.ebr-readout{font:800 16px system-ui,sans-serif;color:#1f2937}
.ebr-hint{font-size:11.5px;color:#9ca3af;text-align:center;max-width:260px}

var track = document.getElementById('ebrTrack');
var fill = document.getElementById('ebrFill');
var thumb = document.getElementById('ebrThumb');
var readout = document.getElementById('ebrReadout');

var MIN = 0, MAX = 100;
var value = 50;
var RESISTANCE = 0.35;

function clampedPct() {
  return Math.max(0, Math.min(100, ((value - MIN) / (MAX - MIN)) * 100));
}

function render() {
  var pct = clampedPct();
  fill.style.width = pct + '%';
  thumb.style.left = pct + '%';
  readout.textContent = Math.round(Math.max(MIN, Math.min(MAX, value)));
  thumb.setAttribute('aria-valuenow', readout.textContent);
}

function stretchTrack(overshootPx) {
  // A small skew/scale so the whole track itself visibly deforms toward the
  // overshoot direction, not just the thumb sliding past a hard boundary.
  var scale = 1 + Math.min(0.06, Math.abs(overshootPx) / 900);
  var originX = overshootPx > 0 ? '100%' : '0%';
  track.style.transformOrigin = originX;
  track.style.transform = 'scaleX(' + scale + ')';
}

function resetTrack(animated) {
  track.style.transition = animated ? 'transform .4s cubic-bezier(.34,1.56,.64,1)' : 'none';
  track.style.transform = 'scaleX(1)';
}

function rawValueFromClientX(clientX) {
  var rect = track.getBoundingClientRect();
  var x = clientX - rect.left;
  return MIN + (x / rect.width) * (MAX - MIN);
}

var dragging = false;

function onMove(e) {
  if (!dragging) return;
  var clientX = e.touches ? e.touches[0].clientX : e.clientX;
  var raw = rawValueFromClientX(clientX);
  if (raw < MIN) {
    value = MIN - (MIN - raw) * RESISTANCE;
    stretchTrack(-(MIN - raw));
  } else if (raw > MAX) {
    value = MAX + (raw - MAX) * RESISTANCE;
    stretchTrack(raw - MAX);
  } else {
    value = raw;
    resetTrack(false);
  }
  render();
}

function onUp() {
  if (!dragging) return;
  dragging = false;
  thumb.style.transition = 'left .3s cubic-bezier(.34,1.56,.64,1)';
  value = Math.max(MIN, Math.min(MAX, value));
  render();
  resetTrack(true);
  setTimeout(function () { thumb.style.transition = ''; }, 320);
}

thumb.addEventListener('pointerdown', function () { dragging = true; thumb.style.transition = 'none'; });
window.addEventListener('pointermove', onMove);
window.addEventListener('pointerup', onUp);
thumb.addEventListener('touchstart', function () { dragging = true; }, { passive: true });
window.addEventListener('touchmove', onMove, { passive: true });
window.addEventListener('touchend', onUp);

thumb.addEventListener('keydown', function (e) {
  var step = e.shiftKey ? 10 : 1;
  if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { value = Math.min(MAX, value + step); render(); e.preventDefault(); }
  else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { value = Math.max(MIN, value - step); render(); e.preventDefault(); }
});

render();