slider
The Slider component allows users to select a value from a range.
Usage
Default
const [value, setValue] = useState(50);
<Slider
min={0}
max={100}
step={1}
value={value}
onChange={(e) => setValue(Number(e.target.value))}
/>Props
| Type | Description | |
|---|---|---|
| aria-describedby | string | Id of external element(s) that describe the slider. |
| aria-invalid | boolean | "true" | "false" | Marks the slider as invalid. |
| aria-label | string | Accessible label for the slider if no visible label is provided. |
| aria-labelledby | string | Id of external element(s) that label the slider. |
| aria-orientation | "horizontal" | "vertical" | Orientation of the slider. |
| aria-required | boolean | "true" | "false" | Marks the slider as required for assistive technology. |
| aria-valuemax | number | Explicit maximum value for assistive technology. |
| aria-valuemin | number | Explicit minimum value for assistive technology. |
| aria-valuenow | number | Explicit current numeric value for assistive technology. |
| aria-valuetext | string | Human-friendly text alternative for the current value. |
| className | string | Additional CSS class names for custom styling. |
| data-testid | string | Optional test ID for testing frameworks. |
| disabled | boolean | If true, the slider is disabled and cannot be interacted with. |
| id | string | Optional id for the slider input. |
| label | string | Optional label displayed above or beside the slider. |
| max | number | The maximum value of the slider. |
| min | number | The minimum value of the slider. |
| name | string | Optional form field name. |
| onChange | (e: React.ChangeEvent<HTMLInputElement>) => void | Callback invoked when the slider value changes. Receives the change event from the input element. |
| onValueChange | ((value: number) => void) | Callback invoked when the slider value changes. |
| required | boolean | If true, the slider is required in form contexts. |
| rounding | RoundingType | Controls the rounding of the component. One of: "none" | "small" | "medium" | "large" | "full" |
| shadow | ShadowType | Controls the shadow of the component. One of: "none" | "light" | "medium" | "strong" | "intense" |
| showValue | boolean | If true, the current slider value is displayed alongside the slider. |
| size | SizeType | Size variant for the slider. One of: "xs" | "small" | "medium" | "large" | "xl" |
| state | StateType | State of the slider. One of: "success" | "error" | "warning" | "disabled" | "" |
| step | number | Increment step for the slider. |
| theme | ThemeType | Theme variant for styling. One of: "primary" | "secondary" | "tertiary" | "quaternary" | "clear" |
| value | number | The current numeric value of the slider. |