Slider

An input where the user selects a value from within a given range.

Sizes

npm install @sunsatosolutions/ui

Attribute	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	The size of the slider.
color	"foreground" \| "primary" \| "secondary" \| "success" \| "warning" \| "danger"	"primary"	The color of the slider.
radius	"none" \| "sm" \| "md" \| "lg" \| "full"	"full"	The radius of the slider track and thumb.
defaultValue	number[]	-	The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
value	number[]	-	The controlled value of the slider. Must be used in conjunction with onValueChange.
name	string	-	The name of the slider. Submitted with its owning form as part of a name/value pair.
disabled	boolean	false	When true, prevents the user from interacting with the slider.
min	number	0	The minimum value for the range.
max	number	100	The maximum value for the range.
step	number	1	The stepping interval.
orientation	"horizontal" \| "vertical"	"horizontal"	The orientation of the slider.
dir	"ltr" \| "rtl"	"ltr"	The reading direction of the slider. If omitted, inherits globally from DirectionProvider or assumes LTR.

Attribute	Type	Description
onValueChange	(value: number[]) => void	Event handler called when the value changes.
onValueCommit	(value: number[]) => void	Event handler called when the value changes at the end of an interaction.