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.
Changing the slider color#
Slider component was designed to be composed to make it easy for you to customize its styles.
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 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 PseudoBox so you can pass all PseudoBox props to change it's style.
SliderFilledTrack composes PseudoBox so you can pass all PseudoBox props to change it's style.
SliderTrack composes Box so you can pass all Box props to change it's style.
Proudly made in 🇳🇬
Released under the MIT License.
Copyright © 2020 Segun Adebayo