Snap-to-tick Slider

<div class="nuda-snap">
  <div class="nuda-snap__track">
    <span class="nuda-snap__mark" style="left:0%"></span>
    <span class="nuda-snap__mark" style="left:25%"></span>
    <span class="nuda-snap__mark" style="left:50%"></span>
    <span class="nuda-snap__mark" style="left:75%"></span>
    <span class="nuda-snap__mark" style="left:100%"></span>
    <div class="nuda-snap__fill" style="width:75%"></div>
    <div class="nuda-snap__thumb" style="left:75%"></div>
  </div>
</div>

// Snap to the nearest 25% step using a back-out easing curve
const STEPS = [0, 25, 50, 75, 100];
const track = document.querySelector('.nuda-snap__track');
const fill  = track.querySelector('.nuda-snap__fill');
const thumb = track.querySelector('.nuda-snap__thumb');

const snap = (raw) => STEPS.reduce(
  (best, s) => Math.abs(s - raw) < Math.abs(best - raw) ? s : best,
  STEPS[0]
);

track.addEventListener('click', (e) => {
  const rect = track.getBoundingClientRect();
  const raw  = ((e.clientX - rect.left) / rect.width) * 100;
  const v = snap(raw);
  fill.style.width = v + '%';
  thumb.style.left = v + '%';
});

.nuda-snap {
  width: 100%;
  max-width: 220px;
  padding: 10px 12px;
}

.nuda-snap__track {
  position: relative;
  height: 4px;
  background: rgba(255,255,255,.08);
  border-radius: 99px;
}

.nuda-snap__mark {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 8px;
  background: rgba(255,255,255,.16);
  transform: translate(-50%,-50%);
  border-radius: 1px;
}

.nuda-snap__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #e4ff54;
  border-radius: 99px;
  transition: width .4s cubic-bezier(.34,1.56,.64,1);
}

.nuda-snap__thumb {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e4ff54;
  transform: translate(-50%,-50%);
  cursor: grab;
  transition: left .4s cubic-bezier(.34,1.56,.64,1);
}