Slider
An input where the user selects a value from within a given range by dragging a thumb along a track.
Built on Radix UI.
- ✓Supports single value and range (multiple thumbs) selection
- ✓Configurable min, max, and step values
- ✓Controlled and uncontrolled modes via value / defaultValue
- ✓Full keyboard support — Arrow keys, Page Up/Down, Home, End
- ✓Thumb has visible focus ring for keyboard navigation
- ✓Disabled state prevents interaction and dims the control
- ✓Forwards ref to the underlying Radix Slider root
import { Slider }from "@aetherstack/ui"
slider.tsx
import { Slider } from "@/components/ui/slider"
export function SliderDemo() {
return <Slider defaultValue={[50]} />
}Usage
Default
A basic slider with a default value. The thumb can be dragged or controlled via keyboard.
With steps
Set step to snap the thumb to discrete values. Useful for quantity selectors or rating inputs.
Range
Passing two values in the defaultValue array creates two thumbs for selecting a range.
Disabled
The disabled prop prevents interaction and reduces opacity.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | number[] | — | Initial value(s) for uncontrolled usage. Use an array with two numbers for a range slider. |
| value | number[] | — | Controlled value(s). Use with onValueChange. |
| onValueChange | (value: number[]) => void | — | Called continuously as the user drags the thumb. |
| onValueCommit | (value: number[]) => void | — | Called once when the user finishes dragging (pointer up or key release). |
| min | number | 0 | Minimum value of the range. |
| max | number | 100 | Maximum value of the range. |
| step | number | 1 | Increment between selectable values. |
| disabled | boolean | false | Disables the slider — prevents pointer events and applies reduced opacity. |
| className | string | — | Additional class names applied to the slider root element. |
* Required props
Accessibility
- →Each thumb is a focusable element with role=slider and aria-valuenow, aria-valuemin, aria-valuemax set automatically.
- →Arrow Left/Right (or Up/Down) move the thumb by one step. Page Up/Down move by 10 steps. Home/End jump to min/max.
- →Always pair the slider with a visible label so users understand what value is being set.
- →For range sliders, each thumb gets its own aria-label — provide them via the name prop or a custom aria-label.