betweenThumbs
Description
The minimum distance between slider thumbs. Useful for preventing the thumbs from being too close together.
Type
numberDefault
0RangeSlider
RangeSlider is a component used for users to select a range of related values.
Props
RangeSliderProps
colorScheme
Description
The visual color appearance of the component.
Type
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"Default
"primary"defaultValue
Description
The initial value of the slider.
Type
[number, number]filledTrackColor
Description
The CSS color property. Used in color of filled track element.
Type
UIValue<"border" | ({} & string) | Color | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 318 more ... | "yellow.950">filledTrackProps
Description
Props for range slider filled track element.
Type
RangeSliderFilledTrackPropsfocusThumbOnChange
Description
If false, the slider handle will not capture focus when value changes.
Type
booleanDefault
truegetAriaValueText
Description
This is used to format the value so that screen readers
can speak out a more human-friendly value.
It is used to set the aria-valuetext property of the input.
Type
(value: number) => string | undefinedid
Description
The base id to use for the slider.
Type
stringinputProps
Description
Props for range slider input element.
Type
HTMLUIProps<"input">isDisabled
Description
If true, the form control will be disabled.
Type
booleanDefault
falseisInvalid
Description
If true, the form control will be invalid.
Type
booleanDefault
falseisReadOnly
Description
If true, the form control will be readonly.
Type
booleanDefault
falseisRequired
Description
If true, the form control will be required.
Type
booleanDefault
falseisReversed
Description
If true, the value will be incremented or decremented in reverse.
Type
booleanmax
Description
The maximum allowed value of the slider. Cannot be less than min.
Type
numberDefault
100min
Description
The minimum allowed value of the slider. Cannot be greater than max.
Type
numberDefault
0name
Description
The name attribute of the hidden input field.
This is particularly useful in forms.
Type
string | [string, string]onChange
Description
Function called whenever the slider value changes.
Type
(value: [number, number]) => voidonChangeEnd
Description
Function called when the user is done selecting a new value.
Type
(value: [number, number]) => voidonChangeStart
Description
Function called when the user starts selecting a new value.
Type
(value: [number, number]) => voidorientation
Description
The orientation of the slider.
Type
"horizontal" | "vertical"Default
'horizontal'size
Description
The size of the RangeSlider.
Type
"sm" | "md" | "lg"Default
"md"step
Description
The step in which increments or decrements have to be made.
Type
numberDefault
1thumbColor
Description
The CSS background property. Used in background of thumb element.
Type
UIValue<"border" | ({} & string) | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | "amber.950" | ... 318 more ... | Background<...>>thumbProps
Description
Props for range slider thumb element.
Type
RangeSliderThumbPropsthumbSize
Description
The CSS box-size property.
Used for calculating the width, height, and percentage of the container element.
Type
UIValue<number | "px" | "max" | "min" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | ... 75 more ... | "xs">trackColor
Description
The CSS color property. Used in color of track element.
Type
UIValue<"border" | ({} & string) | Color | "amber.50" | "amber.100" | "amber.200" | "amber.300" | "amber.400" | "amber.500" | "amber.600" | "amber.700" | "amber.800" | "amber.900" | ... 318 more ... | "yellow.950">trackProps
Description
Props for range slider track element.
Type
RangeSliderTrackPropstrackSize
Description
The CSS height property. Used in height of track element.
Type
UIValue<number | "px" | "max" | "min" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | ... 71 more ... | "xs">value
Description
The value of the slider.
Type
[number, number]variant
Description
The variant of the RangeSlider.
Type
stringEdit this page on GitHub