The static string to use used for `aria-label` if no visible label is used.
Range Slider
The RangeSlider is a multi thumb slider used to select a range of related values.
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
aria-labelDescription
Type
string[]aria-labelledby
aria-labelledbyDescription
The static string `aria-labelledby` that points to the ID of the element that serves as label for the slider
Type
string[]aria-valuetext
aria-valuetextDescription
The static string to use used for `aria-valuetext`
Type
string[]colorScheme
colorSchemeDescription
Color Schemes for RangeSlider are not implemented in the default theme. You can extend the theme to implement them.
Type
stringdefaultValue
defaultValueDescription
The initial value of the slider in uncontrolled mode
Type
number[]direction
directionDescription
The writing mode
Type
"ltr" | "rtl"Default
"ltr"focusThumbOnChange
focusThumbOnChangeDescription
If false, the slider handle will not capture focus when value changes.
Type
booleanDefault
truegetAriaValueText
getAriaValueTextDescription
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
idDescription
The base id to use for the slider and its components
Type
stringisDisabled
isDisabledDescription
If true, the slider will be disabled
Type
booleanisReadOnly
isReadOnlyDescription
If true, the slider will be in `read-only` state
Type
booleanisReversed
isReversedDescription
If true, the value will be incremented or decremented in reverse.
Type
booleanmax
maxDescription
The maximum allowed value of the slider. Cannot be less than min.
Type
numberDefault
100min
minDescription
The minimum allowed value of the slider. Cannot be greater than max.
Type
numberDefault
0minStepsBetweenThumbs
minStepsBetweenThumbsDescription
The minimum distance between slider thumbs. Useful for preventing the thumbs from being too close together.
Type
numberDefault
0name
nameDescription
The name attribute of the hidden input field.
This is particularly useful in forms
Type
string | string[]onChange
onChangeDescription
Function called whenever the slider value changes (by dragging or clicking)
Type
((value: number[]) => void)onChangeEnd
onChangeEndDescription
Function called when the user is done selecting a new value (by dragging or clicking)
Type
((value: number[]) => void)onChangeStart
onChangeStartDescription
Function called when the user starts selecting a new value (by dragging or clicking)
Type
((value: number[]) => void)size
sizeDescription
Sizes for RangeSlider are not implemented in the default theme. You can extend the theme to implement them.
Type
stringstep
stepDescription
The step in which increments/decrements have to be made
Type
numberDefault
1value
valueDescription
The value of the slider in controlled mode
Type
number[]variant
variantDescription
Variants for RangeSlider are not implemented in the default theme. You can extend the theme to implement them.
Type
stringRangeSliderThumb 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.
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
aria-labelDescription
The static string to use used for `aria-label` if no visible label is used.
Type
string[]aria-labelledby
aria-labelledbyDescription
The static string `aria-labelledby` that points to the ID of the element that serves as label for the slider
Type
string[]aria-valuetext
aria-valuetextDescription
The static string to use used for `aria-valuetext`
Type
string[]colorScheme
colorSchemeDescription
Color Schemes for RangeSlider are not implemented in the default theme. You can extend the theme to implement them.
Type
stringdefaultValue
defaultValueDescription
The initial value of the slider in uncontrolled mode
Type
number[]direction
directionDescription
The writing mode
Type
"ltr" | "rtl"Default
"ltr"focusThumbOnChange
focusThumbOnChangeDescription
If false, the slider handle will not capture focus when value changes.
Type
booleanDefault
truegetAriaValueText
getAriaValueTextDescription
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
idDescription
The base id to use for the slider and its components
Type
stringisDisabled
isDisabledDescription
If true, the slider will be disabled
Type
booleanisReadOnly
isReadOnlyDescription
If true, the slider will be in `read-only` state
Type
booleanisReversed
isReversedDescription
If true, the value will be incremented or decremented in reverse.
Type
booleanmax
maxDescription
The maximum allowed value of the slider. Cannot be less than min.
Type
numberDefault
100min
minDescription
The minimum allowed value of the slider. Cannot be greater than max.
Type
numberDefault
0minStepsBetweenThumbs
minStepsBetweenThumbsDescription
The minimum distance between slider thumbs. Useful for preventing the thumbs from being too close together.
Type
numberDefault
0name
nameDescription
The name attribute of the hidden input field.
This is particularly useful in forms
Type
string | string[]onChange
onChangeDescription
Function called whenever the slider value changes (by dragging or clicking)
Type
((value: number[]) => void)onChangeEnd
onChangeEndDescription
Function called when the user is done selecting a new value (by dragging or clicking)
Type
((value: number[]) => void)onChangeStart
onChangeStartDescription
Function called when the user starts selecting a new value (by dragging or clicking)
Type
((value: number[]) => void)size
sizeDescription
Sizes for RangeSlider are not implemented in the default theme. You can extend the theme to implement them.
Type
stringstep
stepDescription
The step in which increments/decrements have to be made
Type
numberDefault
1value
valueDescription
The value of the slider in controlled mode
Type
number[]variant
variantDescription
Variants for RangeSlider are not implemented in the default theme. You can extend the theme to implement them.
Type
stringRangeSliderThumb 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.