Star-Rating Drag Slider — HTML CSS JS Snippet

<div class="srd-wrap">
  <div class="srd-track" id="srdTrack" tabindex="0" role="slider" aria-label="Rating" aria-valuemin="0" aria-valuemax="5" aria-valuenow="3.5">
    <div class="srd-stars-back">★★★★★</div>
    <div class="srd-stars-fill" id="srdFill">★★★★★</div>
    <div class="srd-handle" id="srdHandle"></div>
  </div>
  <div class="srd-readout" id="srdReadout">3.5 / 5</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}
.srd-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.srd-track{position:relative;width:260px;height:52px;cursor:pointer;touch-action:none}
.srd-track:focus-visible{outline:2px solid #6366f1;outline-offset:4px;border-radius:6px}
.srd-stars-back,.srd-stars-fill{position:absolute;inset:0;font-size:48px;line-height:52px;letter-spacing:6px;white-space:nowrap}
.srd-stars-back{color:#e5e7eb}
.srd-stars-fill{color:#f59e0b;width:70%;overflow:hidden}
.srd-handle{position:absolute;top:50%;left:70%;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid #f59e0b;box-shadow:0 2px 6px rgba(15,23,42,.25);transform:translate(-50%,-50%);pointer-events:none}
.srd-readout{font:800 14px system-ui,sans-serif;color:#1f2937}

var track = document.getElementById('srdTrack');
var fill = document.getElementById('srdFill');
var handle = document.getElementById('srdHandle');
var readout = document.getElementById('srdReadout');

var MAX = 5;
var value = 3.5;

function render() {
  var pct = (value / MAX) * 100;
  fill.style.width = pct + '%';
  handle.style.left = pct + '%';
  readout.textContent = value.toFixed(1) + ' / ' + MAX;
  track.setAttribute('aria-valuenow', value.toFixed(1));
}

function valueFromClientX(clientX) {
  var rect = track.getBoundingClientRect();
  var x = Math.max(0, Math.min(rect.width, clientX - rect.left));
  var raw = (x / rect.width) * MAX;
  return Math.round(raw * 2) / 2; // snap to nearest half star
}

var dragging = false;

function onMove(e) {
  if (!dragging) return;
  var clientX = e.touches ? e.touches[0].clientX : e.clientX;
  value = valueFromClientX(clientX);
  render();
}

track.addEventListener('pointerdown', function (e) { dragging = true; onMove(e); });
window.addEventListener('pointermove', onMove);
window.addEventListener('pointerup', function () { dragging = false; });
track.addEventListener('touchstart', function (e) { dragging = true; onMove(e); }, { passive: true });
window.addEventListener('touchmove', onMove, { passive: true });
window.addEventListener('touchend', function () { dragging = false; });

track.addEventListener('keydown', function (e) {
  if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { value = Math.min(MAX, value + 0.5); render(); e.preventDefault(); }
  else if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { value = Math.max(0, value - 0.5); render(); e.preventDefault(); }
  else if (e.key === 'Home') { value = 0; render(); e.preventDefault(); }
  else if (e.key === 'End') { value = MAX; render(); e.preventDefault(); }
});

render();