Leave Yamada UI a star
StarSlider is a component used for allowing users to select a value from a range.
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"Description
The initial value of the slider.
Type
numberDescription
If true, the form control will be disabled.
Type
booleanDefault
falseDescription
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">Description
Props for slider filled track element.
Type
SliderFilledTrackPropsDescription
If false, the slider handle will not capture focus when value changes.
Type
booleanDefault
trueDescription
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 | undefinedDescription
The base id to use for the slider.
Type
stringDescription
Props for slider input element.
Type
HTMLUIProps<"input">Description
If true, the form control will be invalid.
Type
booleanDefault
falseDescription
If true, the form control will be disabled.
Deprecated
Use disabled instead.
Type
booleanDefault
falseDescription
If true, the form control will be invalid.
Deprecated
Use invalid instead.
Type
booleanDefault
falseDescription
If true, the form control will be readonly.
Deprecated
Use readOnly instead.
Type
booleanDefault
falseDescription
If true, the form control will be required.
Deprecated
Use required instead.
Type
booleanDefault
falseDescription
If true, the value will be incremented or decremented in reverse.
Deprecated
Use reversed instead.
Type
booleanDescription
The maximum allowed value of the slider. Cannot be less than min.
Type
numberDefault
100Description
The minimum allowed value of the slider. Cannot be greater than max.
Type
numberDefault
0Description
The name attribute of the hidden input field.
This is particularly useful in forms.
Type
stringDescription
Function called whenever the slider value changes.
Type
(value: number) => voidDescription
Function called when the user is done selecting a new value.
Type
(value: number) => voidDescription
Function called when the user starts selecting a new value.
Type
(value: number) => voidDescription
The orientation of the slider.
Type
"horizontal" | "vertical"Default
'horizontal'Description
If true, the form control will be readonly.
Type
booleanDefault
falseDescription
If true, the form control will be required.
Type
booleanDefault
falseDescription
If true, the value will be incremented or decremented in reverse.
Type
booleanDescription
The size of the Slider.
Type
"sm" | "md" | "lg"Default
"md"Description
The step in which increments or decrements have to be made.
Type
numberDefault
1Description
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<...>>Description
Props for slider thumb element.
Type
SliderThumbPropsDescription
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">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">Description
Props for slider track element.
Type
SliderTrackPropsDescription
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">Description
The value of the slider.
Type
numberDescription
The variant of the Slider.
Type
stringEdit this page on GitHub