The Slider is used to allow users to make selections from a range of values.
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.
Chakra UI export 4 components for Slider:
Slider: The wrapper that provides context and functionality for all
children.SliderTrack: The empty part of the slider that shows the track.SliderFilledTrack: The filled part of the slider.SliderThumb: The handle that's used to change the slider value.Slider component was designed to be composed to make it easy for you to
customize its styles.
Dragging the slider can trigger lots of updates and the user might only be
interested in the final result after sliding is complete. You can use
onChangeEnd for this.
focusThumbOnChange#By default SliderThumb will receive focus whenever value changes. You can
opt-out of this behavior by setting the value of focusThumbOnChange to
false. This is normally used with a "controlled" slider value.
We've exported the useSlider hook to help users manage and build custom slider
UIs.
The Slider component wraps all its children in the Box
component, so you can pass all Box props to change its style.
| Name | Type | Description | Default |
|---|---|---|---|
| aria-label | string | The static string to use used for `aria-label` if no visible label is used. | - |
| aria-labelledby | string | The static string `aria-labelledby` that points to the ID of the element that serves as label for the slider | - |
| aria-valuetext | string | The static string to use used for `aria-valuetext` | - |
| colorScheme | string | - | |
| defaultValue | number | The initial value of the slider in uncontrolled mode | - |
| focusThumbOnChange | boolean | If `false`, the slider handle will not capture focus when value changes. | true |
| getAriaValueText | ((value: number) => string) | Function that returns the `aria-valuetext` for screen readers. It is mostly used to generate a more human-readable representation of the value for assistive technologies | - |
| id | string | The base `id` to use for the slider and its components | - |
| isDisabled | boolean | If `true`, the slider will be disabled | - |
| isReadOnly | boolean | If `true`, the slider will be in `read-only` state | - |
| isReversed | boolean | If `true`, the value will be incremented or decremented in reverse. | - |
| max | number | The maximum allowed value of the slider. Cannot be less than min. | 100 |
| min | number | The minimum allowed value of the slider. Cannot be greater than max. | 0 |
| name | string | The name attribute of the hidden `input` field. This is particularly useful in forms | - |
| onChange | ((value: number) => void) | function gets called whenever the slider handle is being dragged or clicked | - |
| onChangeEnd | ((value: number) => void) | function gets called whenever the user stops dragging the slider handle. | - |
| onChangeStart | ((value: number) => void) | function gets called whenever the user starts dragging the slider handle | - |
| size | string | - | |
| step | number | The step in which increments/decrements have to be made | 1 |
| value | number | The value of the slider in controlled mode | - |
| variant | string | - |
SliderThumb composes Box so you can pass all Box props
to change its style.
SliderFilledTrack composes Box so you can pass all Box
props to change its style.
SliderTrack composes Box so you can pass all Box props
to change its style.