KQ-1119 · STRETCH/SLIDER

Stretch Slider

A slider whose track is a rubber band: in range the thumb is 1:1 under the finger and snap points catch it with a quiet detent, but pull past either end and the thumb lifts the band off its peg and stretches it longer and thinner, keeping its area and necking where the finger pulls, with a creak that rises with the tension. Let go and it snaps back on a spring that takes the release velocity and rings as long as the elasticity allows, with a twang pitched by how far it was pulled; a throw that runs into an end is caught by the band the same way. Arrow keys step, Page keys jump between snap points, Home and End go to the ends, and a key that would go past an end plucks the band instead.

KQ-1119 · STRETCH/SLIDER

Waylight Pay · Table 12

Bill 42.00

Tip

tip 18% · 7.56 · total 49.56

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/stretch-slider

Props

value / defaultValue: number; default min; The value, min to max. Controlled or uncontrolled; while a drag is live the host's echoes are ignored, and on release the thumb settles on whatever the host says.
onValueChange: (value: number) => void; default —; Fires from the drag or key that changed the value, quantized to step.
min: number; default 0; The value at the left peg.
max: number; default 100; The value at the right peg.
step: number; default 1; The value's resolution and one arrow key's move.
label: string; default —; What the slider sets: its accessible name, shown over the band.
format: (value: number) => string; default —; The reading over the band, the captions under it and the spoken value. Defaults to the number itself.
elasticity: number; default 0.5; How rubbery the band is, 0 to 1: how far it gives for the same pull, and how it rings when let go, from one small overshoot to three or four bounces.
maxStretch: number; default 40; The furthest the band stretches past a peg, in px. Faint guides past each peg show the reach, and the track is inset by it so a stretch never leaves the box.
snapPoints: number; default 3; Equal divisions that carry magnetic detents and ticks under the band; PageUp and PageDown jump between them. 0 makes a plain precise slider.
thickness: number; default 8; The band's thickness at rest, in px.
sound: boolean; default false; A creak while the band is stretched that rises with the tension, a twang on release pitched by the stretch, and a quiet detent on snap points. 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.
className: string; default —; Merged onto the root's classes.

Prop	Type	Default	Description
value / defaultValue	number	min	The value, min to max. Controlled or uncontrolled; while a drag is live the host's echoes are ignored, and on release the thumb settles on whatever the host says.
onValueChange	(value: number) => void	—	Fires from the drag or key that changed the value, quantized to step.
min	number	0	The value at the left peg.
max	number	100	The value at the right peg.
step	number	1	The value's resolution and one arrow key's move.
label	string	—	What the slider sets: its accessible name, shown over the band.
format	(value: number) => string	—	The reading over the band, the captions under it and the spoken value. Defaults to the number itself.
elasticity	number	0.5	How rubbery the band is, 0 to 1: how far it gives for the same pull, and how it rings when let go, from one small overshoot to three or four bounces.
maxStretch	number	40	The furthest the band stretches past a peg, in px. Faint guides past each peg show the reach, and the track is inset by it so a stretch never leaves the box.
snapPoints	number	3	Equal divisions that carry magnetic detents and ticks under the band; PageUp and PageDown jump between them. 0 makes a plain precise slider.
thickness	number	8	The band's thickness at rest, in px.
sound	boolean	false	A creak while the band is stretched that rises with the tension, a twang on release pitched by the stretch, and a quiet detent on snap points. 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.
className	string	—	Merged onto the root's classes.