Slider

Custom horizontal range. Pointer drag + full keyboard support. ARIA-compliant.

Throttle64%

Thrust Vector30°

Locked50

Add to your project

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/andromeda-slider

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Prop	Type	Default	Description
value	`number`	-	Controlled value.
defaultValue	`number`	-	Uncontrolled initial value.
min	`number`	0	Minimum value of the range.
max	`number`	100	Maximum value of the range.
step	`number`	1	Increment the value snaps to.
onValueChange	`(next: number) => void`	-	Handler called with the new value on drag or keyboard change.
label	`string`	-	Optional uppercase mono label.
showValue	`boolean`	true	Render the numeric readout next to the label.
unit	`string`	-	Optional unit suffix (e.g. "%", "KM").
disabled	`boolean`	false	Disables interaction and dims the slider.
className	`string`	-	Additional classes for the root wrapper.
style	`React.CSSProperties`	-	Inline styles merged onto the root wrapper.
id	`string`	-	Id for the slider track; auto-generated when omitted.