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-label
string[]
aria-labelledby
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
aria-valuetext
The static string to use used for `aria-valuetext`
string[]
defaultValue
defaultValue
The initial value of the slider in uncontrolled mode
number[]
direction
direction
The writing mode
"ltr" | "rtl"
ltr
focusThumbOnChange
focusThumbOnChange
If false
, the slider handle will not capture focus when value changes.
boolean
true
getAriaValueText
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
id
The base id
to use for the slider and its components
string
isDisabled
isDisabled
If true
, the slider will be disabled
boolean
false
isReadOnly
isReadOnly
If true
, the slider will be in `read-only` state
boolean
false
isReversed
isReversed
If true
, the value will be incremented or decremented in reverse.
boolean
false
max
max
The maximum allowed value of the slider. Cannot be less than min.
number
100
min
min
The minimum allowed value of the slider. Cannot be greater than max.
number
0
minStepsBetweenThumbs
minStepsBetweenThumbs
The minimum distance between slider thumbs. Useful for preventing the thumbs from being too close together.
number
0
name
name
The name attribute of the hidden input
field.
This is particularly useful in forms
string | string[]
onChange
onChange
Function called whenever the slider value changes (by dragging or clicking)
(value: number[]) => void
onChangeEnd
onChangeEnd
Function called when the user is done selecting a new value (by dragging or clicking)
(value: number[]) => void
onChangeStart
onChangeStart
Function called when the user starts selecting a new value (by dragging or clicking)
(value: number[]) => void
step
step
The step in which increments/decrements have to be made
number
1
value
value
The 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.