Wake Slider

Slider drawn as a row of bars where a wake of taller bars trails the handle and swells with its speed, then settles flat when it stops.

Default

Drag across the bars, or click to jump. The faster the handle moves, the bigger the wake.

Fill

Track

Value50

Step1

Show Value

Bars32

Height56px

Rest Height12px

Gap4px

Sensitivity1

Reach6

Skew0.6

Glide0.3s

Smoothing100ms

Disabled

Prop	Type	Default	Description
`value`	`number`	`undefined`	Controlled value, bound with v-model:value.
`defaultValue`	`number`	`50`	Initial value when uncontrolled.
`min`	`number`	`0`	Lowest value.
`max`	`number`	`100`	Highest value.
`step`	`number`	`1`	Snapping grid. Large steps move the handle in notches, and the wake pulses per notch.
`bars`	`number`	`32`	How many bars draw the track.
`height`	`number`	`56`	Full bar height in pixels, the ceiling of the wake.
`restHeight`	`number`	`12`	Bar height at rest in pixels.
`gap`	`number`	`4`	Space between bars in pixels.
`fillColor`	`string`	`'#f5f5f5'`	Lit bars, up to the value.
`trackColor`	`string`	`'#27272a'`	Unlit bars.
`crestColor`	`string`	`''`	Optional tint the raised bars take on by their lift. Empty renders no tint layer.
`sensitivity`	`number`	`1`	How easily speed raises the wake. Low needs a flick, high lifts it on a stroll.
`reach`	`number`	`6`	Half-width of the wake at full speed, in bars.
`skew`	`number`	`0.6`	How much wider the wake is behind the handle than ahead. 0 is symmetric.
`glide`	`number`	`0.3`	Seconds the handle takes to settle. Short hugs the finger, long floats behind it.
`smoothing`	`number`	`100`	Milliseconds of velocity lag. Low twitches with every change of speed, high lingers.
`showValue`	`boolean`	`false`	Shows the value beside the track.
`formatValue`	`(value: number) => string`	-	Formats the readout and the announced value.
`disabled`	`boolean`	`false`	Fades the slider and ignores input.
`ariaLabel`	`string`	`'Value'`	Accessible name of the slider.

Event	Description
`change`	Emitted on every committed change, from the pointer or the keyboard.
`update:value`	Emitted alongside change, for v-model:value.

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`Arrow Right` + `Arrow Up`	Raises the value by one step.
`Arrow Left` + `Arrow Down`	Lowers the value by one step.
`Page Up` + `Page Down`	Moves by ten steps.
`Home` + `End`	Jumps to the minimum or the maximum.

The handle is a slider with aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext. Keyboard changes skip the wake and move at once.
With prefers-reduced-motion the wake is dropped and the bars stay at rest height.