Range Slider

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

SourceTheme Source

Import#

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

Usage#

<RangeSlider.Root aria-label={['min', 'max']} defaultValue={[10, 30]}>
  <RangeSlider.Control>
    <RangeSlider.Track>
      <RangeSlider.FilledTrack />
    </RangeSlider.Track>
    <RangeSlider.Thumb index={0} />
    <RangeSlider.Thumb index={1} />
  </RangeSlider.Control>
</RangeSlider.Root>

Changing the slider color palette#

Set the colorPalette to change the color of the slider.

<RangeSlider.Root
  aria-label={['min', 'max']}
  colorPalette='pink'
  defaultValue={[10, 30]}
>
  <RangeSlider.Control>
    <RangeSlider.Track>
      <RangeSlider.FilledTrack />
    </RangeSlider.Track>
    <RangeSlider.Thumb index={0} />
    <RangeSlider.Thumb index={1} />
  </RangeSlider.Control>
</RangeSlider.Root>

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.Root
  aria-label={['min', 'max']}
  defaultValue={[10, 30]}
  orientation='vertical'
>
  <RangeSlider.Control minH='32'>
    <RangeSlider.Track>
      <RangeSlider.FilledTrack />
    </RangeSlider.Track>
    <RangeSlider.Thumb index={0} />
    <RangeSlider.Thumb index={1} />
  </RangeSlider.Control>
</RangeSlider.Root>

Customizing the Slider#

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

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

Rendering the value text#

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

<RangeSlider.Root aria-label={['min', 'max']} defaultValue={[30, 80]}>
  <Flex justify='space-between'>
    <RangeSlider.Label> Price</RangeSlider.Label>
    <RangeSlider.ValueText />
  </Flex>
  <RangeSlider.Control>
    <RangeSlider.Track>
      <RangeSlider.FilledTrack />
    </RangeSlider.Track>
    <RangeSlider.Thumb index={0} />
    <RangeSlider.Thumb index={1} />
  </RangeSlider.Control>
</RangeSlider.Root>

Changing the step#

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

<RangeSlider.Root defaultValue={[120, 240]} min={0} max={300} step={30}>
  <RangeSlider.Control>
    <RangeSlider.Track bg='red.100'>
      <RangeSlider.FilledTrack bg='tomato' />
    </RangeSlider.Track>
    <RangeSlider.Thumb boxSize={6} index={0} />
    <RangeSlider.Thumb boxSize={6} index={1} />
  </RangeSlider.Control>
</RangeSlider.Root>

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.

Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel