Form Inputs
Slider
A slider allows a user to select a value within a range.
A slider allows a user to select a value within a range.
Component props#
| Name | Type | Description |
|---|---|---|
| label | ReactNode | Label text displayed above the slider |
| value | number | number[] | Controlled value. An array renders one thumb per entry (range slider). |
| defaultValue | number | number[] | Default value |
| minValue | number | Minimum value (default: 0) |
| maxValue | number | Maximum value (default: 100) |
| step | number | Step increment (default: 1) |
| showValue | boolean | Shows current value (default: true) |
| isDisabled | boolean | Disables the slider |
| orientation | 'horizontal' | 'vertical' | Layout direction (default: "horizontal") |
| onChange | (value: number | number[]) => void | Called when value changes |
| onChangeEnd | (value: number | number[]) => void | Called when the drag is committed |