.slider{
  position:absolute;right:26px;top:50%;translate:0 -50%;
  height:min(46vh,420px);width:44px;
  display:flex;align-items:center;justify-content:center;
  touch-action:none;cursor:ns-resize;
}
.slider-line{width:1px;height:100%;background:var(--faint)}
.slider-knob{
  position:absolute;left:50%;translate:-50% -50%;
  width:9px;height:9px;border-radius:50%;
  background:var(--fg);
  pointer-events:none;
}
#slider .slider-knob{--d:calc(5px + 29px * var(--k, .33) * var(--k, .33));width:var(--d);height:var(--d)}
#tracking .slider-knob{width:calc(9px + 23px * max(0, var(--s, 0)) + 6.5px * min(0, var(--s, 0)))}
.slider-value{
  position:absolute;right:calc(100% + 2px);
  translate:0 -50%;
  font-size:11px;color:var(--dim);
  font-variant-numeric:tabular-nums;
  opacity:0;transition:opacity .15s;
  pointer-events:none;white-space:nowrap;
}
.slider:hover .slider-value,.slider.dragging .slider-value{opacity:1}
.slider.tracking{right:auto;left:26px}
.slider.tracking .slider-value{right:auto;left:calc(100% + 2px)}
.slider-zero{position:absolute;left:50%;width:7px;height:1px;translate:-50% -50%;background:var(--faint);pointer-events:none}
.slider.locked{opacity:.28;cursor:not-allowed;transition:opacity .3s linear}
.slider.locked:hover .slider-value{opacity:0}