KQ-1117 · RULER/TAPE

Ruler Tape

A length picker drawn as a tape measure: the tape is 1:1 under the finger beneath a fixed needle and rubber-bands past its hook and its cut end. Thrown, its landing is projected from the release speed with a rate set by friction and snapped to the nearest mark, then reached on a critically damped spring whose natural frequency is that friction's time constant, so the coast is an exponential slowdown that stops exactly on the mark; a throw off the end hits it on the snap spring instead, and a slow release catches on the nearest mark with the snap spring's small overshoot. A ratchet ticks as each mark passes the needle and a thunk lands when it stops. Arrows move a mark, PageUp and PageDown a numbered mark, Home and End to the ends, with the same ratchet and thunk.

KQ-1117 · RULER/TAPE

Desk top width

140 cm wide · fits two monitors

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/ruler-tape

Props

value / defaultValue: number; default min; The length under the needle, in unit. Controlled or uncontrolled; a value the host refuses slides back.
onValueChange: (value: number) => void; default —; Fires from the gesture or key that changed it: per mark while dragging, and once with the landing mark on release, throw, tap or key.
min: number; default 0; Where the tape starts: its hook.
max: number; default 300 (cm) or 120 (in); Where the tape ends.
step: number; default 1 (cm) or 0.1 (in); The value of one mark; marks sit on whole multiples of it.
label: string; default —; What is being measured: the slider's accessible name, shown above the reading.
unit: "cm" | "in"; default "cm"; The scale printed on the tape and the reading. Uncontrolled, switching it converts the value so the same length stays under the needle; controlled, the host converts.
friction: number; default 0.4; How soon a thrown tape stops, 0 to 1: at 0 it coasts like a light reel (a time constant near 400 ms), at 1 it stops like a heavy one (near 100 ms).
spacing: number; default 10; Pixels between marks, 6 to 16: a denser or looser tape, and how much value one flick covers.
majorEvery: number; default 10; Marks per numbered mark, 2 to 10, with a medium mark halfway when it is even. Numbers thin out rather than collide when majors are close. PageUp and PageDown move by one numbered mark.
sound: boolean; default false; A ratchet tick as each mark passes the needle (so its rate is the tape's speed; numbered marks tick lower and firmer) and a thunk when the tape comes to rest after a gesture. Nothing plays, and no audio context exists, unless this is on.
disabled: boolean; default false; Dims the tape, 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 length under the needle, in unit. Controlled or uncontrolled; a value the host refuses slides back.
onValueChange	(value: number) => void	—	Fires from the gesture or key that changed it: per mark while dragging, and once with the landing mark on release, throw, tap or key.
min	number	0	Where the tape starts: its hook.
max	number	300 (cm) or 120 (in)	Where the tape ends.
step	number	1 (cm) or 0.1 (in)	The value of one mark; marks sit on whole multiples of it.
label	string	—	What is being measured: the slider's accessible name, shown above the reading.
unit	"cm" \| "in"	"cm"	The scale printed on the tape and the reading. Uncontrolled, switching it converts the value so the same length stays under the needle; controlled, the host converts.
friction	number	0.4	How soon a thrown tape stops, 0 to 1: at 0 it coasts like a light reel (a time constant near 400 ms), at 1 it stops like a heavy one (near 100 ms).
spacing	number	10	Pixels between marks, 6 to 16: a denser or looser tape, and how much value one flick covers.
majorEvery	number	10	Marks per numbered mark, 2 to 10, with a medium mark halfway when it is even. Numbers thin out rather than collide when majors are close. PageUp and PageDown move by one numbered mark.
sound	boolean	false	A ratchet tick as each mark passes the needle (so its rate is the tape's speed; numbered marks tick lower and firmer) and a thunk when the tape comes to rest after a gesture. Nothing plays, and no audio context exists, unless this is on.
disabled	boolean	false	Dims the tape, takes it out of the tab order and ignores drags and keys.
className	string	—	Merged onto the root's classes.