Forms
Slider
Picks a number from a continuous or stepped range by dragging a thumb along a track. Wraps Radix Slider.
- Source
- src/components/ui/slider.tsx
- Figma
- Slider · state (default, disabled).
Usage
Included in the GliaKit boilerplate. Import it where you need it:
tsx
import { Slider } from "@/components/ui/slider";When to use
- Adjusting a value where the approximate position matters more than the exact number, like volume, opacity or a budget.
- Settings that benefit from immediate visual feedback as the value changes.
- When people need to type an exact value, use an Input with type="number" (or pair the slider with one).
- For picking a minimum and maximum: the kit Slider renders a single thumb, so it does not support ranges out of the box.
Examples
Min, max and step
Snap to fixed increments, here $250 between $0 and $5,000.
Save on release
onValueChange fires while dragging; onValueCommit fires once when you let go. Save in onValueCommit.
Disabled
Dims to 60% and ignores pointer and keyboard input.
API reference
Slider
Wraps Radix Slider.Root and accepts all of its props plus native span attributes. Renders a track, a violet fill and one thumb. Values are always arrays.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number[] | - | The current value (controlled), e.g. [40]. |
| defaultValue | number[] | - | The initial value (uncontrolled), e.g. [40]. |
| onValueChange | (value: number[]) => void | - | Called on every change while dragging or pressing keys. |
| onValueCommit | (value: number[]) => void | - | Called once when the interaction ends, on pointer up or after a key press. Good for saving. |
| min | number | 0 | Lowest value. |
| max | number | 100 | Highest value. |
| step | number | 1 | Increment between allowed values. |
| disabled | boolean | false | Dims the slider to 60% opacity and blocks interaction. |
| name | string | - | Form field name, submitted with the value inside a form. |
| orientation | "horizontal" | "vertical" | "horizontal" | Direction of the track. The default styles are written for horizontal. |
| inverted | boolean | false | Flips the direction so the minimum is on the right. |
Accessibility
- The thumb has role="slider" with aria-valuenow, aria-valuemin and aria-valuemax kept in sync by Radix.
- Arrow keys change the value by one step; Page Up, Page Down and Shift with an arrow move by ten steps; Home and End jump to the minimum and maximum.
- The thumb's accessible name is hard-coded to "Value" in the source. Show a visible label next to the slider, and edit the aria-label on the Thumb in slider.tsx if it needs a more specific name.
- A 2px focus ring appears around the thumb on keyboard focus only.