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
"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"defaultValue
Description
The initial value of the slider.
Type
numberdisabled
Description
If true, the form control will be disabled.
Type
booleanDefault
falsefocusThumbOnChange
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">invalid
Description
If true, the form control will be invalid.
Type
booleanDefault
falseisDisabled
DeprecatedDescription
If true, the form control will be disabled.
Deprecated
Use disabled instead.
Type
booleanDefault
falseisInvalid
DeprecatedDescription
If true, the form control will be invalid.
Deprecated
Use invalid instead.
Type
booleanDefault
falseisReadOnly
DeprecatedDescription
If true, the form control will be readonly.
Deprecated
Use readOnly instead.
Type
booleanDefault
falseisRequired
DeprecatedDescription
If true, the form control will be required.
Deprecated
Use required instead.
Type
booleanDefault
falsemax
Description
The maximum allowed value of the slider. Cannot be less than min.
Type
numbermin
Description
The minimum allowed value of the slider. Cannot be greater than max.
Type
numbername
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[]readOnly
Description
If true, the form control will be readonly.
Type
booleanDefault
falserequired
Description
If true, the form control will be required.
Type
booleanDefault
falsesize
Description
The size of the AlphaSlider.
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 slider thumb element.
Type
HTMLUIPropstrackProps
Description
Props for slider track element.
Type
HTMLUIPropsvalue
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