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-labelstring[]aria-labelledby
aria-labelledbyThe static string `aria-labelledby` that points to the ID of the element that serves as label for the slider
string[]aria-valuetext
aria-valuetextThe static string to use used for `aria-valuetext`
string[]defaultValue
defaultValueThe initial value of the slider in uncontrolled mode
number[]direction
directionThe writing mode
"ltr" | "rtl"ltrfocusThumbOnChange
focusThumbOnChangeIf false, the slider handle will not capture focus when value changes.
booleantruegetAriaValueText
getAriaValueTextFunction 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) => stringid
idThe base id to use for the slider and its components
stringisDisabled
isDisabledIf true, the slider will be disabled
booleanfalseisReadOnly
isReadOnlyIf true, the slider will be in `read-only` state
booleanfalseisReversed
isReversedIf true, the value will be incremented or decremented in reverse.
booleanfalsemax
maxThe maximum allowed value of the slider. Cannot be less than min.
number100min
minThe minimum allowed value of the slider. Cannot be greater than max.
number0minStepsBetweenThumbs
minStepsBetweenThumbsThe minimum distance between slider thumbs. Useful for preventing the thumbs from being too close together.
number0name
nameThe name attribute of the hidden input field.
This is particularly useful in forms
string | string[]onChange
onChangeFunction called whenever the slider value changes (by dragging or clicking)
(value: number[]) => voidonChangeEnd
onChangeEndFunction called when the user is done selecting a new value (by dragging or clicking)
(value: number[]) => voidonChangeStart
onChangeStartFunction called when the user starts selecting a new value (by dragging or clicking)
(value: number[]) => voidstep
stepThe step in which increments/decrements have to be made
number1value
valueThe value of the slider in controlled mode
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.