Forms/Slider
Slider
A single-value range input with a colored fill track and live value display. Fully accessible via keyboard.
import { Slider } from "@animui/ui"Basic
40
Steps and formatting
350
Disabled
60
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Controlled value. |
defaultValue | number | 0 | Uncontrolled initial value. |
min | number | 0 | Minimum value. |
max | number | 100 | Maximum value. |
step | number | 1 | Value increment per tick. |
onChange | (value: number) => void | — | Called on value change. |
label | string | — | Label shown above the track. |
showValue | boolean | true | Show the current value next to the label. |
disabled | boolean | false | Disable the slider. |
className | string | — | Additional classes for the wrapper element. |
Accessibility
- ✓Built on a native
<input type="range">, so it inherits standard keyboard and screen reader support. - ✓Adjustable with arrow keys,
Home, andEndwhen focused. - ✓The
labelis rendered as a visible<label>above the track.