Leave Yamada UI a star
StarSaturationSlider is a component used to allow the user to select a color saturation.
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 saturation slider.
Type
HsvDefault
[0, 0, 1]Description
If false, the saturation slider handle will not capture focus when value changes.
Type
booleanDefault
trueDescription
Props for saturation slider inner element.
Type
HTMLUIPropsDescription
Props for saturation 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 name attribute of the hidden input field.
This is particularly useful in forms.
Type
stringDescription
Function called whenever the saturation slider value changes.
Type
(value: Hsv) => voidDescription
Function called when the user is done selecting a new value.
Type
(value: Hsv) => voidDescription
Function called when the user starts selecting a new value.
Type
(value: Hsv) => voidDescription
The overlay used for the saturation slider.
Type
Overlay[]Description
The aspect ratio of the saturation slider.
Type
UIValue<number>Default
'16 / 9'Description
The size of the SaturationSlider.
Type
"sm" | "md" | "lg" | "full"Default
"md"Description
The step in which increments or decrements have to be made.
Type
numberDefault
0.01Description
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 saturation slider thumb element.
Type
HTMLUIPropsDescription
Props for saturation slider track element.
Type
HTMLUIPropsDescription
The value of the saturation slider.
Type
HsvDescription
The variant of the SaturationSlider.
Type
stringDescription
If true, the slider has an inner box-shadow.
Type
booleanDefault
trueEdit this page on GitHub