KQ-1116 · CURVE/SLIDER

Curve Slider

A slider whose track is any line (an arc, a wave or a spiral): the thumb goes to the point on the path nearest the finger by projection onto the sampled path, the value is arc length so equal steps are equal distances however the line bends, and the fill traces the path behind the thumb. A press away from the thumb chases it on the flick spring and then follows 1:1, the ends rubber-band out along their tangents, and a release is projected along the path so a flick carries on round the curve, gliding to its step on the glide spring with the finger's speed. Arrows move a step, PageUp and PageDown go to the next mark, Home and End to the ends, and the thumb glides along the path each time, ticking at every mark it passes.

KQ-1116 · CURVE/SLIDER

Zone 2 run time

zone 2 · 06:00 to 06:20

Open it on the Tactile stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/curve-slider

Props

value / defaultValue: number; default min; The value, between min and max. Controlled or uncontrolled; a value the host refuses glides back along the path.
onValueChange: (value: number) => void; default —; Fires from the gesture or key that changed it: once per step crossed while dragging, and once on release, tap or key.
min: number; default 0; The value at the start of the path.
max: number; default 100; The value at the end of the path.
step: number; default 1; The value's resolution and what one arrow key moves.
label: string; default —; What the slider sets: its accessible name, shown above the path.
format: (value: number) => string; default —; The reading beside the label and in the spoken value. Defaults to the number.
path: "arc" | "wave" | "spiral"; default "arc"; The line the track follows: a 240° arc, one and a half periods of a wave, or a spiral of 1.75 turns winding outward. All three project, measure and rubber-band the same way.
marks: number; default 6; Beads at equal steps of value along the path, 0 to 12. They turn to the accent as the thumb passes, tick as it crosses them, and are where PageUp and PageDown go.
fill: boolean; default true; Trace the path behind the thumb in the accent colour.
thickness: number; default 6; Track weight in px, 2 to 14; the thumb and beads grow with it.
sound: boolean; default false; Tick softly on the frame the thumb crosses a mark (or an end), pitched by its place along the path and panned by where it is. Nothing plays, and no audio context exists, unless this is on.
disabled: boolean; default false; Dims the slider, takes it out of the tab order and ignores drags and keys.
className: string; default —; Merged onto the root's classes.

Prop	Type	Default	Description
value / defaultValue	number	min	The value, between min and max. Controlled or uncontrolled; a value the host refuses glides back along the path.
onValueChange	(value: number) => void	—	Fires from the gesture or key that changed it: once per step crossed while dragging, and once on release, tap or key.
min	number	0	The value at the start of the path.
max	number	100	The value at the end of the path.
step	number	1	The value's resolution and what one arrow key moves.
label	string	—	What the slider sets: its accessible name, shown above the path.
format	(value: number) => string	—	The reading beside the label and in the spoken value. Defaults to the number.
path	"arc" \| "wave" \| "spiral"	"arc"	The line the track follows: a 240° arc, one and a half periods of a wave, or a spiral of 1.75 turns winding outward. All three project, measure and rubber-band the same way.
marks	number	6	Beads at equal steps of value along the path, 0 to 12. They turn to the accent as the thumb passes, tick as it crosses them, and are where PageUp and PageDown go.
fill	boolean	true	Trace the path behind the thumb in the accent colour.
thickness	number	6	Track weight in px, 2 to 14; the thumb and beads grow with it.
sound	boolean	false	Tick softly on the frame the thumb crosses a mark (or an end), pitched by its place along the path and panned by where it is. Nothing plays, and no audio context exists, unless this is on.
disabled	boolean	false	Dims the slider, takes it out of the tab order and ignores drags and keys.
className	string	—	Merged onto the root's classes.