Slider from @prepared911/ui/slider is a Radix slider. The primitive handles thumb focus, range semantics, and keyboard increments; your job is to label the slider, expose a human-readable value, and provide a typed alternative where precision matters.
What the component handles
Role assignment. Thumb renders role="slider" with aria-valuemin, aria-valuemax, and aria-valuenow.
Keyboard increments. Arrow keys move by step; PageUp/PageDown move in larger increments; Home/End jump to ends.
Focus ring. Thumb has a visible focus ring at all times.
What you must provide
Accessible name. Pass a label via aria-label or aria-labelledby—especially when the slider is icon-adjacent (volume, brightness).
Human-readable value. When the raw number is ambiguous ("70" could be dB or %), pass aria-valuetext with the unit ("70%", "+6 dB").
Typed alternative. For settings that require precision (large ranges, small steps), pair the slider with an input or expose the number inline.
Keyboard behavior
Tab / Shift+Tab move focus to the slider thumb.
Arrow keys adjust the value by step.
PageUp / PageDown adjust by a larger amount (typically 10 × step).
Home / End move to the min / max.
Semantics and roles
role="slider" on the thumb.
aria-valuemin, aria-valuemax, aria-valuenow, and optional aria-valuetext.
aria-orientation="horizontal" or "vertical" when layout is non-default.
Touch targets and responsive behavior
Keep the visible thumb size ≥ 24 px and the interactive hit area ≥ 44 px so touch users can grab it.
On coarse pointers, increase step so the slider reaches useful values without hair-trigger precision.
Known caveats
Inaccessible raw values. A slider that reports "42" without context is hard to interpret. Always pair with a label and, when needed, aria-valuetext.
Large ranges with small steps. Numeric input is more accessible than a 1–10 000 slider. Keep sliders for ranges users judge by feel.