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.

import {
  Slider,
  SliderTrack,
  SliderFilledTrack,
  SliderThumb,
} from '@chakra-ui/react'

Usage#

Note: We recommend adding a aria-label or aria-labelledby prop to provide an accessible label for the Slider.

<Slider aria-label='slider-ex-1' defaultValue={30}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

Changing the slider color scheme#

<Slider aria-label='slider-ex-2' colorScheme='pink' defaultValue={30}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

Changing the slider orientation#

<Slider
  aria-label='slider-ex-3'
  defaultValue={30}
  orientation='vertical'
  minH='32'
>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

Customizing the Slider#

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

<Slider aria-label='slider-ex-4' defaultValue={30}>
  <SliderTrack bg='red.100'>
    <SliderFilledTrack bg='tomato' />
  </SliderTrack>
  <SliderThumb boxSize={6}>
    <Box color='tomato' as={MdGraphicEq} />
  </SliderThumb>
</Slider>

Discrete Sliders#

Discrete sliders allow you to snap to predefined sets of values. This can be accomplished using the step prop.

<Slider defaultValue={60} min={0} max={300} step={30}>
  <SliderTrack bg='red.100'>
    <Box position='relative' right={10} />
    <SliderFilledTrack bg='tomato' />
  </SliderTrack>
  <SliderThumb boxSize={6} />
</Slider>

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.

<Slider aria-label='slider-ex-5' onChangeEnd={(val) => console.log(val)}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

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.

<Slider aria-label='slider-ex-5' value={value} focusThumbOnChange={false}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

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.

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.