KQ-1115 · LEVEL/VIAL

Level Vial

A two-sided slider drawn as a spirit level: dragging tilts the level 1:1 with the finger toward the end the value is heading for, and the bubble drifts after it through the liquid on a spring whose stiffness and damping are the viscosity, lagging, overshooting, stretching with its speed and flattening against the end of the vial. A release is projected from its velocity so a flick carries, and the level settles on the snap spring with the release velocity. It is a slider: arrows move a step, PageUp and PageDown go to the next graduation, Home and End to the extremes, each tilting the level and sending the bubble exactly as a drag does.

KQ-1115 · LEVEL/VIAL

Guest mic balance

guest mic · 20 left

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/level-vial

Props

value / defaultValue: number; default the centre; The value, between min and max. Controlled or uncontrolled; a value the host refuses glides back.
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 -50; The left extreme. The centre, halfway between min and max, is neutral.
max: number; default 50; The right extreme.
step: number; default 1; The value's resolution and what one arrow key moves, counted out from the centre.
label: string; default —; What the level sets: the slider's accessible name, shown above it.
format: (value: number) => string; default —; The reading beside the label and in the spoken value. Defaults to a signed offset from the centre.
ends: [string, string]; default ["left", "right"]; What the two sides are called in the spoken value, as in "L 20, left of centre."
viscosity: number; default 0.4; Thin spirit to thick oil, 0 to 1: how far the bubble lags, how much it overshoots and stretches, how far a flick carries, and the glug's pitch.
length: number; default 360; The level's length in px, 240 to 480; it shrinks to fit a narrower box. The ends always rise the same 10 px, so a longer level tilts less.
marks: number; default 4; Graduations on each side of the centre, 0 to 8, drawn across the glass and on the housing. PageUp and PageDown move to the next one.
tint: "spirit" | "amber" | "cobalt" | "clear"; default "spirit"; The liquid's colour; the bubble and its rim follow it.
sound: boolean; default false; Play a bubbly glug while the bubble moves, louder as it moves faster, pitched by the value and panned by its place. Nothing plays, and no audio context exists, unless this is on.
disabled: boolean; default false; Dims the level, 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	the centre	The value, between min and max. Controlled or uncontrolled; a value the host refuses glides back.
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	-50	The left extreme. The centre, halfway between min and max, is neutral.
max	number	50	The right extreme.
step	number	1	The value's resolution and what one arrow key moves, counted out from the centre.
label	string	—	What the level sets: the slider's accessible name, shown above it.
format	(value: number) => string	—	The reading beside the label and in the spoken value. Defaults to a signed offset from the centre.
ends	[string, string]	["left", "right"]	What the two sides are called in the spoken value, as in "L 20, left of centre."
viscosity	number	0.4	Thin spirit to thick oil, 0 to 1: how far the bubble lags, how much it overshoots and stretches, how far a flick carries, and the glug's pitch.
length	number	360	The level's length in px, 240 to 480; it shrinks to fit a narrower box. The ends always rise the same 10 px, so a longer level tilts less.
marks	number	4	Graduations on each side of the centre, 0 to 8, drawn across the glass and on the housing. PageUp and PageDown move to the next one.
tint	"spirit" \| "amber" \| "cobalt" \| "clear"	"spirit"	The liquid's colour; the bubble and its rim follow it.
sound	boolean	false	Play a bubbly glug while the bubble moves, louder as it moves faster, pitched by the value and panned by its place. Nothing plays, and no audio context exists, unless this is on.
disabled	boolean	false	Dims the level, takes it out of the tab order and ignores drags and keys.
className	string	—	Merged onto the root's classes.