Leave Yamada UI a star
StarHueSlider is a component used to allow the user to select a color hue.
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"Description
The initial value of the slider.
Type
numberDescription
If false, the slider handle will not capture focus when value changes.
Type
booleanDefault
trueDescription
Props for slider input element.
Type
HTMLUIProps<"input">Description
If true, the form control will be disabled.
Type
booleanDefault
falseDescription
If true, the form control will be invalid.
Type
booleanDefault
falseDescription
If true, the form control will be readonly.
Type
booleanDefault
falseDescription
If true, the form control will be required.
Type
booleanDefault
falseDescription
The maximum allowed value of the slider. Cannot be less than min.
Type
numberDescription
The minimum allowed value of the slider. Cannot be greater than max.
Type
numberDescription
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 overlay used for the slider.
Type
HTMLUIProps[]Description
The size of the HueSlider.
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
HTMLUIPropsDescription
Props for slider track element.
Type
HTMLUIPropsDescription
The value of the slider.
Type
numberDescription
The variant of the HueSlider.
Type
stringDescription
If true, the slider has an inner box-shadow.
Type
booleanDefault
trueEdit this page on GitHub