On This Page
Input component to select a single value or range from a scale.
default sliderSelecting a single value within a defined range (volume control, brightness, zoom percentage)range sliderSelecting a sub-range with two handles (price range filters, date range bounds)discrete sliderSelecting values with specific, constrained increments (rating scales, clothing sizes 1-5)| Prop | Type | Default | Description |
|---|---|---|---|
| min | number | 0 | The minimum value of the slider. |
| max | number | 100 | The maximum value of the slider. |
| step | number | 1 | The step value increment. |
| value | number | 0 | The current value of the slider. |
| onChange | (value: number) => void | — | Callback function called when the value changes. |
| showValue | boolean | false | Whether to show the current value above the slider. |
| variant | "default" | "success" | "warning" | "error" | "default" | The visual style variant. |
| className | string | — | Additional custom class names. |
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | number[] | [20, 80] | The default initial range values. |
| min | number | 0 | The minimum range value. |
| max | number | 100 | The maximum range value. |
| step | number | 1 | The step increment. |
| onChange | (value: number[]) => void | — | Callback function called when values change. |
| className | string | — | Additional custom class names. |
role="slider" with correct aria-valuemin, aria-valuemax, and aria-valuenow attributes.