Forms/RangeSlider
RangeSlider
Styled range input with a colored fill track, live value display, and custom value formatter. Fully accessible via keyboard.
import { RangeSlider } from "@animui/ui"Basic
40
Color variants
40
65
80
25
With format
$350
75%
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. |
formatValue | (v: number) => string | String(v) | Format the displayed value (e.g. add $, %, units). |
color | "blue" | "violet" | "green" | "orange" | "blue" | Track and thumb color. |
disabled | boolean | false | Disable the slider. |