Slider
Pick a number, or a range, by dragging a thumb along a track.JSX
<Slider aria-label="Playground slider" defaultValue={40} />Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Slider } from '@advui/core'
<Slider aria-label="Volume" defaultValue={40} />
<Slider aria-label="Price" defaultValue={[20, 80]} />Examples
Single value
Controlled, with a visible label and value.Preview
Code
40%
Range
Two thumbs with currency value text.Preview
Code
$40 – $160
API reference
Slider
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | number[] | — | A number for one thumb, or an array for a range. |
defaultValue | number | number[] | — | Starting `value` when uncontrolled. |
onValueChange | (value: number | number[]) => void | — | Called while the value changes, in the same shape you passed. |
onValueCommit | (value: number | number[]) => void | — | Called when a drag ends. |
min | number | 0 | Lowest value. |
max | number | 100 | Highest value. |
step | number | 1 | Increment. |
size | 'sm' | 'md' | 'lg' | 'md' | Thumb and track size. |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Direction of the track. |
disabled | boolean | — | Prevent interaction. |
aria-label | string | — | Accessible name. Required when there is no visible label. |
aria-labelledby | string | — | The id of a visible label that names the slider. |
getValueText | (value: number) => string | — | Readable value for screen readers, e.g. a currency. |
thumbLabels | string[] | — | Names for range thumbs. Default: “Minimum” / “Maximum”. |
Accessibility
- Each thumb has
role="slider"witharia-valuemin,aria-valuemax,aria-valuenowand optionalaria-valuetext. - Range thumbs are named separately (“Price, Minimum” / “Price, Maximum”).
- On iOS and Android, VoiceOver and TalkBack adjust the value with swipe gestures (increment / decrement actions), and thumbs have a 44pt touch target.
- Disabled sliders leave the tab order and are announced as disabled.
| Key | Action |
|---|---|
| ← → / ↑ ↓ | Decrease / increase by one step. |
| Page Up / Page Down, Shift + arrow | Change by ten steps. |
| Home / End | Jump to the minimum / maximum. |
Responsive behavior
Fills its container horizontally; vertical sliders take their height from the parent.
Platform notes
Web
Pointer, touch and keyboard input.
iOS
Drag the thumb, or swipe up / down with VoiceOver.
Android
Drag the thumb, or use TalkBack volume-key / swipe adjustments.