Forms
Slider
A value chosen along a range.
Examples
default
Notes
A value chosen along a range.
Radix owns the keyboard contract — arrows step, Page keys jump, Home and End reach the ends — and the ARIA that reports the value. What is here is the look, and the labelling, which is the part a slider most often gets wrong: a thumb that announces "42" and nothing else leaves a screen reader user with a number and no idea what it measures.
A 44px hit area sits invisibly around the 16px thumb, because a thumb sized for the design is well under any pointer-target guideline.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | [string, string] | Names the control. Required: a slider with no name announces only a number, and a number with no noun is not information. A range slider (two thumbs) needs one name per thumb — pass an array. | |
| format | (value: number) => string | String | Renders the value with a unit or a currency, e.g. `(n) => n + '%'`. |
| showValue | boolean | false | Prints the current value beside the label. |
Also accepts everything in ComponentProps<typeof SliderPrimitive.Root>. Those are forwarded to the underlying element and are not listed row by row.
Keyboard
| Key | Does |
|---|---|
| ←→ | Moves by one step. |
| Page UpPage Down | Moves by a larger step. |
| HomeEnd | Jumps to the minimum or maximum. |
Accessibility
- label is required. A thumb that announces "42" and nothing else leaves a screen reader user with a number and no idea what it measures.
- A 44px hit area sits invisibly around the 16px thumb.
- Arrows step, Page keys jump, Home and End reach the ends.