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#

Editable Example

Changing the slider color#

Editable Example

Customized Sliders#

Slider component was designed to be composed to make it easy for you to customize its styles.

Editable Example

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.

NameTypeDefaultDescription
valuenumberThe value of the slider.
defaultValuenumberThe initial value of the slider.
maxnumberStandard input max attribute.
minnumberStandard input min attribute.
stepnumberStandard input step attribute.
onChange(value: number): voidCallback fired when the value of the slider changes.
onFocusReact.FocusEventHanderCallback fired when the thumb receives focus
onBlurReact.FocusEventHanderCallback fired when the thumb is blurred
onMouseDown`React.MouseEventHanderReact.TouchEventHandler`
aria-labelstringThe accessible label.
aria-labelledbystringThe id of the element that labels the sliders
aria-valuetextstringThe aria-valuetext of the switch for accessibility.
orientationstringThe orientation of the slider, only horizontal is supported for now.
getAriaValueText(value: number ): stringThe callback to format the aria-valuetext.
sizesm, md, lgThe size of the slider.
colorstringThe color scheme to use for the slider. Use a color key in theme.colors
namestringThe name of the slider component when used in a form.
idstringThe id of the slider component when used in a form.
childrenReact.ReactNodeThe 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.

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2020 Segun Adebayo