Slider

Accessibility

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.

Slider / API and Development

Snackbar / Usage

On this page

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Touch targets and responsive behavior

Known caveats

Slider

Accessibility

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.

Slider / API and Development

Snackbar / Usage

On this page

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Touch targets and responsive behavior

Known caveats