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 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.
SliderThumb will receive focus whenever
value changes. You can
opt-out of this behavior by setting
focusThumbOnChange=false. This is
normally used with a "controlled" slider value.
We've exported the
useSlider hook to help users manage and build custom slider
Slider component wraps all it's children in the Box
component, so you can pass all
Box props to change it's style.
|The value of the slider.|
|The initial value of the slider.|
|Callback fired when the value of the slider changes.|
|Callback fired when the slider changes is done.|
|Callback fired when the thumb receives focus|
|Callback fired when the thumb is blurred|
|The accessible label.|
|The aria-valuetext of the switch for accessibility.|
|The orientation of the slider, only |
|The callback to format the |
|The size of the slider.|
|The color scheme to use for the slider. Use a color key in |
|The name of the slider component when used in a form.|
|The id of the slider component when used in a form.|
|The children of the slider.|
SliderThumb composes Box so you can pass all Box props to change it's style.
SliderFilledTrack composes Box so you can pass all Box props to change it's style.
SliderTrack composes Box so you can pass all Box props to change it's style.