color
Description
The color used for the slider.
Type
stringDefault
#ffffffAlphaSlider
AlphaSlider is a component used to allow the user to select color transparency.
Props
AlphaSliderProps
colorScheme
Description
The visual color appearance of the component.
Type
"whiteAlpha" | "blackAlpha" | "gray" | "neutral" | "red" | "danger" | "rose" | "pink" | "flashy" | "orange" | "warning" | "amber" | "yellow" | "lime" | "green" | "success" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "primary" | "info" | "link" | "indigo" | "violet" | "secondary" | "purple" | "fuchsia"defaultValue
Description
The initial value of the slider.
Type
numberfocusThumbOnChange
Description
If false, the slider handle will not capture focus when value changes.
Type
booleanDefault
trueinputProps
Description
Props for 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
falsemax
Description
The maximum allowed value of the slider. Cannot be less than min.
Type
numberDefault
1min
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
stringonChange
Description
Function called whenever the slider value changes.
Type
(value: number) => voidonChangeEnd
Description
Function called when the user is done selecting a new value.
Type
(value: number) => voidonChangeStart
Description
Function called when the user starts selecting a new value.
Type
(value: number) => voidoverlays
Description
The overlay used for the slider.
Type
HTMLUIProps<"div">[]size
Description
The size of the AlphaSlider.
Type
"sm" | "md" | "lg"Default
mdstep
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" | "link" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "current" | "focus" | "whiteAlpha.50" | "whiteAlpha.100" | "whiteAlpha.200" | "whiteAlpha.300" | ... 315 more ... | Background<...>>thumbProps
Description
Props for slider thumb element.
Type
HTMLUIProps<"div">trackProps
Description
Props for slider track element.
Type
HTMLUIProps<"div">value
Description
The value of the slider.
Type
numbervariant
Description
The variant of the AlphaSlider.
Type
stringwithShadow
Description
If true, the slider has an inner box-shadow.
Type
booleanDefault
trueEdit this page on GitHub