Slider
The Slider is used to allow users to make selections from a range of values.
Design guidance
When and how to use this
Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.
When to consider something else
For cases when we want to represent the selection as a range. For more explicit available values, you may consider using Select instead.
React
Slider composes Chakra's Slider. We offer size variants that align with
those in TextInput.
Slider has support for adding marks along the range of the input. This will allow customization on the visual indicators of values.
Slider accepts a suggestedValue prop to display an indicator at location of the range.
Slider accepts an orientation prop to control the orientation of the slider.
| Prop | Description |
|---|---|
ariaValueText | Text for the human-readable text alternative to aria-valuenow. If supplied this string is interpolated directly after the value without spacing. |
label | Accessible label for the slider. |
suggestedValue | Displays an indicator at a particular "suggested" value. |
snapThreshold | Determines a threshold within which the slider will snap directly to the suggestedValue. |
marks | Array of objects representing the marks on the slider. Each object should have a value (position of the mark) and a label (text for the mark). |
size | Sets the size of the slider. Use small for compact interfaces. |
width | Slider defaults to a width of 100%. Set width: auto and display: inline-block or use flexbox to layout a slider with automatic width. |
min | Minimum value of the slider. |
max | Maximum value of the slider. |
step | Step interval for the slider. |
value | Controlled value of the slider. |
defaultValue | Default value of the slider when it is uncontrolled. |
isDisabled | If true, the slider will be disabled. |
onChange | Callback function triggered when the slider value changes. |
onChangeStart | Callback function triggered when the slider starts being dragged. |
onChangeEnd | Callback function triggered when the slider stops being dragged. |