Range Slider

Import#

import { RangeSlider } from '@chakra-ui/react'

Usage#

Changing the slider color palette#

Set the colorPalette to change the color of the slider.

Changing the slider orientation#

By default, the slider orientation is horizontal. However, if you want to have it vertical, pass the orientation prop and set its value to vertical.

Customizing the Slider#

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

Rendering the value text#

Use the RangeSlider.ValueText component to render the value of the slider.

Changing the step#

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

Listening to changes#

Use the onChange and onChangeEnd props to listen to changes in the slider

<RangeSlider.Root
  aria-label={['min', 'max']}
  onChangeEnd={(val) => console.log(val)}
>
  <RangeSlider.Control>
    <RangeSlider.Track>
      <RangeSlider.FilledTrack />
    </RangeSlider.Track>
    <RangeSlider.Thumb index={0} />
    <RangeSlider.Thumb index={1} />
  </RangeSlider.Control>
</RangeSlider.Root>

useRangeSlider#

The useRangeSlider hook is exported with state and focus management logic for use in creating tailor-made range slider component for your application. Read more about the useRangeSlider hook here.

Props#

RangeSlider Props#

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

RangeSliderThumb Props#

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

RangeSliderFilledTrack Props#

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

RangeSliderTrack Props#

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