Range Slider

分类：

other

日期:

2022-2-05

标签：

chakra

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.

View source View theme source @chakra-ui/slider Watch video

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#

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#

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`

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

string[]

`aria-labelledby`

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

string[]

`aria-valuetext`

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

string[]

`colorScheme`

Color Schemes RangeSlider

(string & {})

`defaultValue`

The initial value of the slider in uncontrolled mode

number[]

`direction`

The writing mode

"ltr" | "rtl"

"ltr"

`focusThumbOnChange`

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

boolean

true

`getAriaValueText`

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

((value: number) => string)

`id`

The base id to use for the slider and its components

string

`isDisabled`

If true, the slider will be disabled

boolean

`isReadOnly`

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

boolean

`isReversed`

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

boolean

`max`

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

number

100

`min`

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

number

0

`minStepsBetweenThumbs`

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

number

0

`name`

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

string | string[]

`onChange`

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

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

`onChangeEnd`

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

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

`onChangeStart`

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

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

`size`

Sizes RangeSlider

string

`step`

The step in which increments/decrements have to be made

number

1

`value`

The value of the slider in controlled mode

number[]

`variant`

Variants RangeSlider

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.