Range Slider

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

    SourceTheme source@chakra-ui/slider

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.

Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel