Slider
An input where the user selects a value from within a given range.
Installation
npx vayu-ui init #one time onlynpx vayu-ui add slidernpx vayu-ui add -t slider #with test case needsUsage
Slider Examples
50%
$20 - $80
75%
0255075100
<Slider defaultValue={[50]} max={100} step={1} label="Volume" />
<Slider defaultValue={[25, 75]} max={100} step={5} label="Price range" />Anatomy
<Slider />Accessibility
- Keyboard support (
ArrowKeys,PageUp,PageDown,Home,End) to increment or decrement the value. - ARIA attributes (
role="slider",aria-valuenow,aria-valuemin,aria-valuemax,aria-label). - Focus behavior visually indicates the selected thumb via standard focus rings and sizing.
Screen reader behavior
- Announces as a "slider" indicating current value via
aria-valuetext. - Announces range limits using
aria-valueminandaria-valuemax. - Multi-thumb sliders announce their index, such as "Value 1 of 2".
Component Folder Structure
Slider/
├── hooks.ts
├── index.ts
├── Slider.tsx
├── SliderThumb.tsx
├── SliderTrack.tsx
├── types.ts
└── README.mdProps
| Prop | Type | Default | Description |
|---|---|---|---|
value | number[] | - | The controlled value(s) of the slider. |
defaultValue | number[] | [0] | The initial value(s) when uncontrolled. |
min | number | 0 | The minimum allowed value. |
max | number | 100 | The maximum allowed value. |
step | number | 1 | The stepping increment for the slider. |
disabled | boolean | false | Whether the slider is disabled. |
name | string | - | Form field name for submissions. |
label | string | - | Accessible label used for screen readers. |
onValueChange | (value: number[]) => void | - | Event fired when the value updates during interaction. |
onValueCommit | (value: number[]) => void | - | Event fired when interaction has finished (drag/key end). |