The static string to use used for `aria-label` if no visible label is used.
Slider
The Slider is used to allow users to make selections from a range of values.
Props#
Slider Props#
The Slider 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
stringaria-labelledby
aria-labelledbyDescription
The static string `aria-labelledby` that points to the ID of the element that serves as label for the slider
Type
stringaria-valuetext
aria-valuetextDescription
The static string to use used for `aria-valuetext`
Type
stringcolorScheme
colorSchemeType
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"Default
"blue"defaultValue
defaultValueDescription
The initial value of the slider in uncontrolled mode
Type
numberdirection
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
0name
nameDescription
The name attribute of the hidden input field.
This is particularly useful in forms
Type
stringonChange
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
sizeType
"lg" | "md" | "sm"Default
"md"step
stepDescription
The step in which increments/decrements have to be made
Type
numberDefault
1value
valueDescription
The value of the slider in controlled mode
Type
numbervariant
variantDescription
Variants for Slider are not implemented in the default theme. You can extend the theme to implement them.
Type
stringSliderThumb Props#
SliderThumb composes Box so you can pass all Box props
to change its style.
SliderFilledTrack Props#
SliderFilledTrack composes Box so you can pass all Box
props to change its style.
SliderTrack Props#
SliderTrack composes Box so you can pass all Box props
to change its style.
Props#
Slider Props#
The Slider 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
stringaria-labelledby
aria-labelledbyDescription
The static string `aria-labelledby` that points to the ID of the element that serves as label for the slider
Type
stringaria-valuetext
aria-valuetextDescription
The static string to use used for `aria-valuetext`
Type
stringcolorScheme
colorSchemeType
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"Default
"blue"defaultValue
defaultValueDescription
The initial value of the slider in uncontrolled mode
Type
numberdirection
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
0name
nameDescription
The name attribute of the hidden input field.
This is particularly useful in forms
Type
stringonChange
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
sizeType
"lg" | "md" | "sm"Default
"md"step
stepDescription
The step in which increments/decrements have to be made
Type
numberDefault
1value
valueDescription
The value of the slider in controlled mode
Type
numbervariant
variantDescription
Variants for Slider are not implemented in the default theme. You can extend the theme to implement them.
Type
stringSliderThumb Props#
SliderThumb composes Box so you can pass all Box props
to change its style.
SliderFilledTrack Props#
SliderFilledTrack composes Box so you can pass all Box
props to change its style.
SliderTrack Props#
SliderTrack composes Box so you can pass all Box props
to change its style.