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[]defaultValue
defaultValueDescription
The initial value of the slider in uncontrolled mode
Type
number[]direction
directionDescription
The writing mode
Type
"ltr" | "rtl"Default
ltrfocusThumbOnChange
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) => stringid
idDescription
The base id to use for the slider and its components
Type
stringisDisabled
isDisabledDescription
If true, the slider will be disabled
Type
booleanDefault
falseisReadOnly
isReadOnlyDescription
If true, the slider will be in `read-only` state
Type
booleanDefault
falseisReversed
isReversedDescription
If true, the value will be incremented or decremented in reverse.
Type
booleanDefault
falsemax
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[]) => voidonChangeEnd
onChangeEndDescription
Function called when the user is done selecting a new value (by dragging or clicking)
Type
(value: number[]) => voidonChangeStart
onChangeStartDescription
Function called when the user starts selecting a new value (by dragging or clicking)
Type
(value: number[]) => voidstep
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[]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.
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[]defaultValue
defaultValueDescription
The initial value of the slider in uncontrolled mode
Type
number[]direction
directionDescription
The writing mode
Type
"ltr" | "rtl"Default
ltrfocusThumbOnChange
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) => stringid
idDescription
The base id to use for the slider and its components
Type
stringisDisabled
isDisabledDescription
If true, the slider will be disabled
Type
booleanDefault
falseisReadOnly
isReadOnlyDescription
If true, the slider will be in `read-only` state
Type
booleanDefault
falseisReversed
isReversedDescription
If true, the value will be incremented or decremented in reverse.
Type
booleanDefault
falsemax
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[]) => voidonChangeEnd
onChangeEndDescription
Function called when the user is done selecting a new value (by dragging or clicking)
Type
(value: number[]) => voidonChangeStart
onChangeStartDescription
Function called when the user starts selecting a new value (by dragging or clicking)
Type
(value: number[]) => voidstep
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[]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.