Slider
Buttons
An accessible animated slider with drag interaction, keyboard navigation, tooltip value display, and spring animations.
Loading preview...
Customize
Value50
Min0
Max100
Step1
Show Value
Show Labels
Disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 50 | Current value of the slider. |
onChange | (value: number) => void | undefined | Callback when the slider value changes. |
min | number | 0 | Minimum value of the slider. |
max | number | 100 | Maximum value of the slider. |
step | number | 1 | Step increment for the slider. |
showValue | boolean | true | Whether to show the value tooltip. |
showLabels | boolean | true | Whether to show min/max labels. |
disabled | boolean | false | Disables the slider. |
className | string | '' | Additional CSS classes. |