Range Slider

The RangeSlider is a multi thumb slider used to select a range of related values.

    View SourceView Theme Source@chakra-ui/slider

Import#

Chakra UI exports the following component parts to implement the Range Slider:

  • RangeSlider: The wrapper that provides context and functionality for all children.
  • RangeSliderTrack: The empty part of the slider that shows the track.
  • RangeSliderFilledTrack: The filled part of the slider.
  • RangeSliderThumb: The handle that's used to change the slider value.
import {
RangeSlider,
RangeSliderTrack,
RangeSliderFilledTrack,
RangeSliderThumb,
} from '@fluidtruck/core'

Usage#

The RangeSlider is a multi thumb slider used to select a range of related values. A common use-case of this component is a price range picker that allows a user to set the minimum and maximum price.

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

<RangeSlider aria-label={['min', 'max']} defaultValue={[10, 30]}>
<RangeSliderTrack>
<RangeSliderFilledTrack />
</RangeSliderTrack>
<RangeSliderThumb index={0} />
<RangeSliderThumb index={1} />
</RangeSlider>

Changing the slider color scheme#

You can override the color scheme of the slider to any color key specified in theme.colors.

<RangeSlider
aria-label={['min', 'max']}
colorScheme='pink'
defaultValue={[10, 30]}
>
<RangeSliderTrack>
<RangeSliderFilledTrack />
</RangeSliderTrack>
<RangeSliderThumb index={0} />
<RangeSliderThumb index={1} />
</RangeSlider>

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.

<RangeSlider
aria-label={['min', 'max']}
colorScheme='pink'
defaultValue={[10, 30]}
orientation='vertical'
minH='32'
>
<RangeSliderTrack>
<RangeSliderFilledTrack />
</RangeSliderTrack>
<RangeSliderThumb index={0} />
<RangeSliderThumb index={1} />
</RangeSlider>

Customizing the Slider#

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

<RangeSlider aria-label={['min', 'max']} defaultValue={[30, 80]}>
<RangeSliderTrack bg='red.100'>
<RangeSliderFilledTrack bg='tomato' />
</RangeSliderTrack>
<RangeSliderThumb boxSize={6} index={0}>
<Box color='tomato' as={MdGraphicEq} />
</RangeSliderThumb>
<RangeSliderThumb boxSize={6} index={1}>
<Box color='tomato' as={MdGraphicEq} />
</RangeSliderThumb>
</RangeSlider>

Discrete Sliders#

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

<RangeSlider defaultValue={[120, 240]} min={0} max={300} step={30}>
<RangeSliderTrack bg='red.100'>
<RangeSliderFilledTrack bg='tomato' />
</RangeSliderTrack>
<RangeSliderThumb boxSize={6} index={0} />
<RangeSliderThumb boxSize={6} index={1} />
</RangeSlider>

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.

<RangeSlider
aria-label={['min', 'max']}
onChangeEnd={(val) => console.log(val)}
>
<RangeSliderTrack>
<RangeSliderFilledTrack />
</RangeSliderTrack>
<RangeSliderThumb index={0} />
<RangeSliderThumb index={1} />
</RangeSlider>

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.