Slider from @prepared911/ui-core 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.
- 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.
- 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.
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.
- 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.
