Slosh Gauge

Tank gauge whose liquid chases the value with mass, tilts with its own speed and splashes against the top when it slams full; optionally a vertical slider.

Default

Drag the tank, or focus it and use the arrow keys, to set the level. The presets under it jump to a value so you can watch the liquid settle.

Customize

Value60

InteractiveShow ValueDisabled

Liquid

Glass

Width88px

Height180px

Radius20px

Ticks4

Viscosity0.15

Tilt0.45

Splash0.42

API Reference

SloshGauge

Prop	Type	Default	Description
`modelValue`	`number`	`undefined`	The level, 0 to 100, as v-model. Every change launches the liquid toward it. Leave it undefined to run uncontrolled.
`defaultValue`	`number`	`60`	The starting level when uncontrolled.
`interactive`	`boolean`	`false`	Press or drag the tank to set the level, arrows to step. A marker appears at the level.
`showValue`	`boolean`	`true`	A readout whose colour flips at the surface.
`disabled`	`boolean`	`false`	Dimmed and inert. Value changes still animate.
`liquidColor`	`string`	`'#f5f5f5'`	The liquid. The readout over it picks dark or light by itself.
`glassColor`	`string`	`'#27272a'`	The tank.
`width`	`number`	`88`	Tank width in px. The readout scales with it.
`height`	`number`	`180`	Tank height in px.
`radius`	`number`	`20`	Corner radius in px, capped at half the smaller side.
`ticks`	`number`	`4`	Lines etched on the right of the glass. 0 hides them.
`viscosity`	`number`	`0.15`	0 is a rigid gauge. Higher is slower to answer, longer to settle, and overshoots more.
`tilt`	`number`	`0.45`	How far the surface leans per unit of speed. 0 keeps it flat.
`splash`	`number`	`0.42`	How much of a slam the top and bottom give back. 0 swallows it, 0.8 nearly bounces.
`unit`	`string`	`'%'`	Readout suffix.
`ariaLabel`	`string`	`'Level'`	Accessible name of the meter or slider.

Event	Description
`update:modelValue`	The integer level on press, on each change while dragging, and on keys. Interactive only.

Accessibility

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`ArrowUp` + `ArrowRight`	Raise the level by 2. Hold Shift for 10.
`ArrowDown` + `ArrowLeft`	Lower the level by 2. Hold Shift for 10.
`PageUp` + `PageDown`	Raise or lower the level by 10.
`Home` + `End`	Jump to 0 or 100.
`Escape`	Cancels a drag and restores the level it started from.

Static, it is a meter. With interactive on it becomes a vertical slider and takes focus.
With prefers-reduced-motion the liquid follows the value without overshoot or tilt.

Sling Button Spring Check