Draggable Timeline Range Slider — HTML CSS JS Snippet

<div class="dtr-wrap">
  <label class="dtr-label">Filter by date range</label>
  <div class="dtr-readout"><span id="dtrStart">Mar 3</span> — <span id="dtrEnd">Mar 19</span></div>
  <div class="dtr-track" id="dtrTrack">
    <div class="dtr-months" id="dtrMonths"></div>
    <div class="dtr-fill" id="dtrFill"></div>
    <div class="dtr-handle" id="dtrHandleStart" tabindex="0" role="slider" aria-label="Range start"></div>
    <div class="dtr-handle" id="dtrHandleEnd" tabindex="0" role="slider" aria-label="Range end"></div>
  </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}
.dtr-wrap{width:100%;max-width:440px}
.dtr-label{display:block;font-size:12px;font-weight:700;color:#6b7080;margin-bottom:6px}
.dtr-readout{font:800 16px system-ui,sans-serif;color:#1f2937;margin-bottom:18px}
.dtr-track{position:relative;height:6px;border-radius:6px;background:#e5e7eb;margin:0 4px}
.dtr-months{position:absolute;top:14px;left:0;right:0;display:flex;justify-content:space-between;font:600 10px system-ui,sans-serif;color:#c7cad4}
.dtr-fill{position:absolute;top:0;height:100%;border-radius:6px;background:#6366f1}
.dtr-handle{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid #6366f1;box-shadow:0 2px 6px rgba(15,23,42,.2);transform:translate(-50%,-50%);cursor:grab;touch-action:none}
.dtr-handle:active{cursor:grabbing}
.dtr-handle:focus-visible{outline:2px solid #6366f1;outline-offset:3px}

var DAYS = 30;
var MONTH_LABEL = 'March';
var track = document.getElementById('dtrTrack');
var fill = document.getElementById('dtrFill');
var handleStart = document.getElementById('dtrHandleStart');
var handleEnd = document.getElementById('dtrHandleEnd');
var readoutStart = document.getElementById('dtrStart');
var readoutEnd = document.getElementById('dtrEnd');
var monthsWrap = document.getElementById('dtrMonths');

['1', '8', '15', '22', '30'].forEach(function (d) {
  var span = document.createElement('span');
  span.textContent = MONTH_LABEL.slice(0, 3) + ' ' + d;
  monthsWrap.appendChild(span);
});

var start = 3, end = 19;

function fmt(day) { return MONTH_LABEL.slice(0, 3) + ' ' + day; }

function pct(day) { return (day / DAYS) * 100; }

function render() {
  handleStart.style.left = pct(start) + '%';
  handleEnd.style.left = pct(end) + '%';
  fill.style.left = pct(start) + '%';
  fill.style.width = (pct(end) - pct(start)) + '%';
  readoutStart.textContent = fmt(start);
  readoutEnd.textContent = fmt(end);
  handleStart.setAttribute('aria-valuetext', fmt(start));
  handleEnd.setAttribute('aria-valuetext', fmt(end));
}

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

var activeHandle = null;

function onMove(e) {
  if (!activeHandle) return;
  var clientX = e.touches ? e.touches[0].clientX : e.clientX;
  var d = dayFromClientX(clientX);
  if (activeHandle === handleStart) start = Math.max(1, Math.min(end - 1, d));
  else end = Math.min(DAYS, Math.max(start + 1, d));
  render();
}

function attachDrag(handle) {
  handle.addEventListener('pointerdown', function () { activeHandle = handle; });
  handle.addEventListener('touchstart', function () { activeHandle = handle; }, { passive: true });
}
attachDrag(handleStart);
attachDrag(handleEnd);
window.addEventListener('pointermove', onMove);
window.addEventListener('pointerup', function () { activeHandle = null; });
window.addEventListener('touchmove', onMove, { passive: true });
window.addEventListener('touchend', function () { activeHandle = null; });

function keyHandler(isStart) {
  return function (e) {
    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
    var dir = e.key === 'ArrowRight' ? 1 : -1;
    if (isStart) start = Math.max(1, Math.min(end - 1, start + dir));
    else end = Math.min(DAYS, Math.max(start + 1, end + dir));
    render();
    e.preventDefault();
  };
}
handleStart.addEventListener('keydown', keyHandler(true));
handleEnd.addEventListener('keydown', keyHandler(false));

render();