KQ-1504 · WAKE/RANGE

Wake Range

A range slider seen from above like water: every frame the thumb moves it drops a wake sample, and each sample's wavefront spreads away from the channel and fades with age, so a moving thumb opens two V-lines behind it like a hull's wake that keep spreading and settle after it stops. The fill catches up on its own critically damped spring with foam showing between it and the thumb, the thumb follows a drag 1:1 and rubber-bands a few px past the ends, a press on the channel sends it there on springs.snap, and a release is projected and settles on the nearest step with the throw's velocity. Arrow keys step on springs.snap so keys leave a wake too, Page keys move a tenth, Home and End jump, and the host's own changes glide on springs.glide.

KQ-1504 · WAKE/RANGE

Cruising speed

24 nm to Coldbrook Pointarrive in 3 h 0 m

8 kn · eta 3 h 0 m

Open it on the Canvas stage

Install

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

$ pnpm dlx shadcn@latest add @kinetiq/wake-range

Props

value / defaultValue: number; default — / min; The value, controlled or uncontrolled, from min to max.
onValueChange: (value: number) => void; default —; Fires from the drag, press or key that changed it, at every step it passes.
onValueCommit: (value: number) => void; default —; Fires once the thumb comes to rest after a gesture or a key: the value to act on.
min: number; default 0; The value at the left end.
max: number; default 100; The value at the right end.
step: number; default 1; The resolution when steps is 0.
steps: number; default 6; Stops across the whole range, drawn as dots in the channel: the thumb ticks at each, keys step by one and releases settle on the nearest. 0 slides by step.
wake: number; default 0.6; How long and wide the wake runs, 0 to 1: a 0.3 s ripple close to the channel, or a 1.6 s wake spreading to the rail's edge.
fill: boolean; default true; Colour the channel from the start to the value; off leaves only the foam and the wake.
catchUp: number; default 0.5; How quickly the fill catches up with the thumb, 0 to 1: a lazy tide or a brisk one (a critically damped spring).
label: string; default —; The slider's accessible name, shown above the channel.
hideLabel: boolean; default false; Keep the label for assistive technology only.
format: (value: number) => string; default the value, to the step's decimals; The reading and the spoken aria-valuetext; its longest output's width is reserved.
color: "cobalt" | "signal" | "ember" | "rose" | string; default "cobalt"; The fill, foam, wake and thumb dot: a preset tuned for both themes or any CSS colour.
size: "sm" | "md" | "lg"; default "md"; Rail height (room for the wake), channel and thumb size, and type.
sound: boolean; default false; Tick at every step the thumb passes by hand, press or key, pitch rising with the value; never for the host's changes.
disabled: boolean; default false; Dims the slider and ignores pointer and keys.
className: string; default —; Classes for the outer column.

Prop	Type	Default	Description
value / defaultValue	number	— / min	The value, controlled or uncontrolled, from min to max.
onValueChange	(value: number) => void	—	Fires from the drag, press or key that changed it, at every step it passes.
onValueCommit	(value: number) => void	—	Fires once the thumb comes to rest after a gesture or a key: the value to act on.
min	number	0	The value at the left end.
max	number	100	The value at the right end.
step	number	1	The resolution when steps is 0.
steps	number	6	Stops across the whole range, drawn as dots in the channel: the thumb ticks at each, keys step by one and releases settle on the nearest. 0 slides by step.
wake	number	0.6	How long and wide the wake runs, 0 to 1: a 0.3 s ripple close to the channel, or a 1.6 s wake spreading to the rail's edge.
fill	boolean	true	Colour the channel from the start to the value; off leaves only the foam and the wake.
catchUp	number	0.5	How quickly the fill catches up with the thumb, 0 to 1: a lazy tide or a brisk one (a critically damped spring).
label	string	—	The slider's accessible name, shown above the channel.
hideLabel	boolean	false	Keep the label for assistive technology only.
format	(value: number) => string	the value, to the step's decimals	The reading and the spoken aria-valuetext; its longest output's width is reserved.
color	"cobalt" \| "signal" \| "ember" \| "rose" \| string	"cobalt"	The fill, foam, wake and thumb dot: a preset tuned for both themes or any CSS colour.
size	"sm" \| "md" \| "lg"	"md"	Rail height (room for the wake), channel and thumb size, and type.
sound	boolean	false	Tick at every step the thumb passes by hand, press or key, pitch rising with the value; never for the host's changes.
disabled	boolean	false	Dims the slider and ignores pointer and keys.
className	string	—	Classes for the outer column.