Range Slider

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

View sourceView theme source@chakra-ui/range-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 '@chakra-ui/react';

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>

<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>

<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>

<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>

<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>

<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>

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

useRangeSlider

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

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.

aria-label

Description

The static string to use used for `aria-label` if no visible label is used.

Type

string[]

aria-labelledby

Description

The static string `aria-labelledby` that points to the ID of the element that serves as label for the slider

Type

string[]

aria-valuetext

Description

The static string to use used for `aria-valuetext`

Type

string[]

colorScheme

Description

Color Schemes for RangeSlider are not implemented in the default theme. You can extend the theme to implement them.

Type

string

defaultValue

Description

The initial value of the slider in uncontrolled mode

Type

number[]

direction

Description

The writing mode

Type

"ltr" | "rtl"

Default

"ltr"

focusThumbOnChange

Description

If false, the slider handle will not capture focus when value changes.

Type

boolean

Default

true

getAriaValueText

Description

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

Type

((value: number) => string)

id

Description

The base id to use for the slider and its components

Type

string

isDisabled

Description

If true, the slider will be disabled

Type

boolean

isReadOnly

Description

If true, the slider will be in `read-only` state

Type

boolean

isReversed

Description

If true, the value will be incremented or decremented in reverse.

Type

boolean

max

Description

The maximum allowed value of the slider. Cannot be less than min.

Type

number

Default

100

min

Description

The minimum allowed value of the slider. Cannot be greater than max.

Type

number

Default

0

minStepsBetweenThumbs

Description

The minimum distance between slider thumbs. Useful for preventing the thumbs from being too close together.

Type

number

Default

0

name

Description

The name attribute of the hidden input field. This is particularly useful in forms

Type

string | string[]

onChange

Description

Function called whenever the slider value changes (by dragging or clicking)

Type

((value: number[]) => void)

onChangeEnd

Description

Function called when the user is done selecting a new value (by dragging or clicking)

Type

((value: number[]) => void)

onChangeStart

Description

Function called when the user starts selecting a new value (by dragging or clicking)

Type

((value: number[]) => void)

size

Description

Sizes for RangeSlider are not implemented in the default theme. You can extend the theme to implement them.

Type

string

step

Description

The step in which increments/decrements have to be made

Type

number

Default

1

value

Description

The value of the slider in controlled mode

Type

number[]

variant

Description

Variants for RangeSlider are not implemented in the default theme. You can extend the theme to implement them.

Type

string

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.