Browse components
Slosh Gauge
Round liquid gauge whose level springs to each new value and sloshes side to side before settling, with the readout inverting where the liquid covers it. Drag or key it to set the level.
Installation
npx shadcn@latest add @glint-ui/slosh-gaugeFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/slosh-gauge.json
Usage
import { SloshGauge } from "@/components/ui/slosh-gauge";
<SloshGauge value={storage} onChange={setStorage} color="#38bdf8" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | number | 62 | Initial level when uncontrolled. |
| color | string | "#38bdf8" | Liquid color. |
| size | number | 208 | Diameter in px. |
| slosh | number | 1 | How much the liquid sloshes. |
| interactive | boolean | true | Let the user drag or key the level (slider); off makes it a meter. |
| label | string | "Tank level" | Accessible name. |
| value | ReactNode | — | Controlled level 0-100, pair with onChange. |
| onChange | ReactNode | — | (value: number) => void. |
| className | string | — | Extra classes for the root element. |