Skip to Content
Sponsor

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

Turn vertical#

Editable Example

Customized Sliders#

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

Editable Example

Getting the final value when dragging the slider#

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.

Configure thumb focus with 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.

useSlider#

We've exported the useSlider hook to help users manage and build custom slider UIs.

Props#

Slider Props#

The Slider component wraps all its children in the Box component, so you can pass all Box props to change its style.

NameTypeDescriptionDefault
aria-labelstringThe static string to use used for `aria-label` if no visible label is used.-
aria-labelledbystringThe static string `aria-labelledby` that points to the ID of the element that serves as label for the slider-
aria-valuetextstringThe static string to use used for `aria-valuetext`-
colorSchemestring-
defaultValuenumberThe initial value of the slider in uncontrolled mode-
focusThumbOnChangebooleanIf `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-
idstringThe base `id` to use for the slider and its components-
isDisabledbooleanIf `true`, the slider will be disabled-
isReadOnlybooleanIf `true`, the slider will be in `read-only` state-
isReversedbooleanIf `true`, the value will be incremented or decremented in reverse.-
maxnumberThe maximum allowed value of the slider. Cannot be less than min.100
minnumberThe minimum allowed value of the slider. Cannot be greater than max.0
namestringThe 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-
orientation"horizontal" | "vertical"orientation of the slider"horizontal"
sizestring-
stepnumberThe step in which increments/decrements have to be made1
styleConfigRecord<string, any>-
valuenumberThe value of the slider in controlled mode-
variantstring-

SliderThumb Props#

SliderThumb composes Box so you can pass all Box props to change its style.

SliderFilledTrack Props#

SliderFilledTrack composes Box so you can pass all Box props to change its style.

SliderTrack Props#

SliderTrack composes Box so you can pass all Box props to change its style.

Edit this page