Slider

function SliderPattern() {
  const [value, setValue] = useState(60);

  function onKeyDown(e) {
    if (e.key === "ArrowRight" || e.key === "ArrowUp") { e.preventDefault(); setValue(v => clamp(v + STEP)); }
    else if (e.key === "ArrowLeft" || e.key === "ArrowDown") { e.preventDefault(); setValue(v => clamp(v - STEP)); }
    else if (e.key === "PageUp") { e.preventDefault(); setValue(v => clamp(v + BIG_STEP)); }
    else if (e.key === "PageDown") { e.preventDefault(); setValue(v => clamp(v - BIG_STEP)); }
    else if (e.key === "Home") { e.preventDefault(); setValue(MIN); }
    else if (e.key === "End") { e.preventDefault(); setValue(MAX); }
  }

  return (
    <div onPointerDown={(e) => setFromClientX(e.clientX)}> {/* click-on-track jump */}
      <div
        role="slider"
        tabIndex={0}
        aria-labelledby="volume-label"
        aria-valuemin={MIN}
        aria-valuemax={MAX}
        aria-valuenow={value}
        aria-valuetext={`${value}%`}
        onKeyDown={onKeyDown}
      />
    </div>
  );
}