Components/Slider
Slider
Range input control for selecting a numeric value with keyboard and pointer support. Custom-drawn track, centered high-contrast thumb, smooth 100ms glide, three fill variants and sizes, and an optional value bubble.
Installation
npx ajaxui add sliderProps
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | - | - |
| defaultValue | number | - | - |
| onValueChange | (value: number) => void | - | - |
| min | number | 0 | - |
| max | number | 100 | - |
| step | number | 1 | - |
| size | "sm" | "md" | "lg" | "md" | Track thickness and thumb size. |
| variant | "default" | "gradient" | "soft" | "default" | Fill style - solid primary, primary→violet sweep, or muted tint. |
| showValue | boolean | false | Floating value bubble above the thumb while dragging or focused. |
| formatValue | (value: number) => string | - | Formats the bubble text. |