Vertical Dual-Handle Range Slider — HTML CSS JS Snippet

<div class="vdr-wrap">
  <div class="vdr-readout">
    <span id="vdrMax">78°</span>
    <span class="vdr-dash">—</span>
    <span id="vdrMin">62°</span>
  </div>
  <div class="vdr-track" id="vdrTrack">
    <div class="vdr-fill" id="vdrFill"></div>
    <div class="vdr-handle" id="vdrHandleMax" tabindex="0" role="slider" aria-label="Maximum temperature" aria-valuemin="50" aria-valuemax="90" aria-valuenow="78"></div>
    <div class="vdr-handle" id="vdrHandleMin" tabindex="0" role="slider" aria-label="Minimum temperature" aria-valuemin="50" aria-valuemax="90" aria-valuenow="62"></div>
  </div>
  <div class="vdr-scale"><span>90°</span><span>70°</span><span>50°</span></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}
.vdr-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.vdr-readout{font:800 15px system-ui,sans-serif;color:#1f2937;display:flex;align-items:center;gap:8px}
.vdr-dash{color:#c7cad4;font-weight:600}
.vdr-track{position:relative;width:8px;height:280px;border-radius:6px;background:#e5e7eb}
.vdr-fill{position:absolute;left:0;right:0;border-radius:6px;background:linear-gradient(180deg,#f59e0b,#6366f1)}
.vdr-handle{position:absolute;left:50%;width:24px;height:24px;border-radius:50%;background:#fff;border:3px solid #6366f1;box-shadow:0 2px 8px rgba(15,23,42,.22);transform:translate(-50%,50%);cursor:grab;touch-action:none}
.vdr-handle:active{cursor:grabbing}
.vdr-handle:focus-visible{outline:2px solid #6366f1;outline-offset:3px}
.vdr-scale{position:absolute;display:flex;flex-direction:column;justify-content:space-between;height:280px;margin-left:26px;font:600 10.5px system-ui,sans-serif;color:#9ca3af}
.vdr-wrap{position:relative}

var track = document.getElementById('vdrTrack');
var fill = document.getElementById('vdrFill');
var handleMax = document.getElementById('vdrHandleMax');
var handleMin = document.getElementById('vdrHandleMin');
var readoutMax = document.getElementById('vdrMax');
var readoutMin = document.getElementById('vdrMin');

var MIN = 50, MAX = 90;
var valMax = 78, valMin = 62;

function pctFromVal(v) { return (v - MIN) / (MAX - MIN); }

function render() {
  var pMax = pctFromVal(valMax);
  var pMin = pctFromVal(valMin);
  // Track's bottom = MIN, top = MAX. "bottom" CSS offset from track's own bottom edge.
  handleMax.style.bottom = (pMax * 100) + '%';
  handleMin.style.bottom = (pMin * 100) + '%';
  fill.style.bottom = (pMin * 100) + '%';
  fill.style.top = ((1 - pMax) * 100) + '%';
  readoutMax.textContent = valMax + '°';
  readoutMin.textContent = valMin + '°';
  handleMax.setAttribute('aria-valuenow', valMax);
  handleMin.setAttribute('aria-valuenow', valMin);
}

function valFromClientY(clientY) {
  var rect = track.getBoundingClientRect();
  var y = Math.max(0, Math.min(rect.height, clientY - rect.top));
  var pct = 1 - y / rect.height;
  return Math.round(MIN + pct * (MAX - MIN));
}

var activeHandle = null;

function startDrag(handle) {
  return function (e) {
    activeHandle = handle;
    e.preventDefault();
  };
}

function onMove(e) {
  if (!activeHandle) return;
  var clientY = e.touches ? e.touches[0].clientY : e.clientY;
  var v = valFromClientY(clientY);
  if (activeHandle === handleMax) { valMax = Math.max(valMin + 1, Math.min(MAX, v)); }
  else { valMin = Math.min(valMax - 1, Math.max(MIN, v)); }
  render();
}

function endDrag() { activeHandle = null; }

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

function keyHandler(isMax) {
  return function (e) {
    var step = e.shiftKey ? 5 : 1;
    if (e.key === 'ArrowUp') { if (isMax) valMax = Math.min(MAX, valMax + step); else valMin = Math.min(valMax - 1, valMin + step); render(); e.preventDefault(); }
    else if (e.key === 'ArrowDown') { if (isMax) valMax = Math.max(valMin + 1, valMax - step); else valMin = Math.max(MIN, valMin - step); render(); e.preventDefault(); }
  };
}
handleMax.addEventListener('keydown', keyHandler(true));
handleMin.addEventListener('keydown', keyHandler(false));

render();