Slider
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.
Import#
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.
Usage#
Changing the slider color#
Customized Sliders#
Slider component was designed to be composed to make it easy for you to customize its styles.
Props#
Slider Props#
The Slider component wraps all it's children in the Box component, so
you can pass all Box props to change it's style.
| Name | Type | Default | Description |
|---|---|---|---|
value | number | The value of the slider. | |
defaultValue | number | The initial value of the slider. | |
max | number | Standard input max attribute. | |
min | number | Standard input min attribute. | |
step | number | Standard input step attribute. | |
onChange | (value: number): void | Callback fired when the value of the slider changes. | |
onFocus | React.FocusEventHander | Callback fired when the thumb receives focus | |
onBlur | React.FocusEventHander | Callback fired when the thumb is blurred | |
onMouseDown | `React.MouseEventHander | React.TouchEventHandler` | |
aria-label | string | The accessible label. | |
aria-labelledby | string | The id of the element that labels the sliders | |
aria-valuetext | string | The aria-valuetext of the switch for accessibility. | |
orientation | string | The orientation of the slider, only horizontal is supported for now. | |
getAriaValueText | (value: number ): string | The callback to format the aria-valuetext. | |
size | sm, md, lg | The size of the slider. | |
color | string | The color scheme to use for the slider. Use a color key in theme.colors | |
name | string | The name of the slider component when used in a form. | |
id | string | The id of the slider component when used in a form. | |
children | React.ReactNode | The children of the slider. |
SliderThumb Props#
SliderThumb composes PseudoBox so you can pass all PseudoBox props to change it's style.
SliderFilledTrack Props#
SliderFilledTrack composes PseudoBox so you can pass all PseudoBox props to change it's style.
SliderTrack Props#
SliderTrack composes Box so you can pass all Box props to change it's style.