Slider
A styled range input for selecting a numeric value within a defined range, with optional label, hint, and current value display.
Installation
npx dafink-ui add sliderDemo
Drag or use arrow keys to adjust.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| value | number | - | Controlled current value. |
| onValueChange | (value: number) => void | - | Called with the new numeric value on change. |
| min | number | 0 | Minimum value. |
| max | number | 100 | Maximum value. |
| step | number | 1 | Increment between selectable values. |
| disabled | boolean | false | Disables the slider. |
| label | string | - | Visible label above the track; links to the input via id. |
| hint | string | - | Helper text below the track. |
| showValue | boolean | false | Shows the current numeric value next to the label. |
| size | 'default' | 'sm' | 'default' | "sm" renders a shorter row and thinner track for dense layouts. |
| tone | 'brand' | 'current' | 'brand' | "current" derives track/fill/thumb color from currentColor instead of the brand token, for sliders placed on an arbitrary colored surface (e.g. inside a colored chat bubble). |
| ariaLabel | string | - | Sets aria-label on the input directly; use when there is no visible label. |
| ariaValueText | string | - | Overrides the announced value with a custom string, e.g. a formatted timestamp. |
| className | string | "" | Additional classes merged onto the root wrapper. |