Level Meter
level-meterViewersOne bar per channel, in either orientation. The bar follows RMS, the level you hear as loudness. A thin tick marks the recent peak and bleeds back down, since on percussive material the peak is gone long before the eye catches it. Supply an analyser, a data callback, or levels your engine already computed.
Bone / Studio
Loading interactive preview…
Planar / Flat
Loading interactive preview…
Midnight / Minimal
Loading interactive preview…
Ember / Vintage
Loading interactive preview…
Ink / Studio
Loading interactive preview…
Mint / Flat
Loading interactive preview…
Install
Copies the source into your project. Anything it depends on comes with it.
$ pnpm dlx shadcn@latest add @pluginui/core-level-meterPulls in
use-audio-sourcecontrol-theme
First time? Add the registry to your components.json once:
{
"registries": {
"@pluginui": "https://pluginui.com/r/{name}.json"
}
}Usage
Connect the documented props to your application or host.
import { LevelMeter } from "@/components/ui/level-meter"
<LevelMeter
analyser={analyserNode}
channels={2}
labels={["L", "R"]}
showScale
segments={12}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| analyser | AnalyserNode | — | A live analyser to read from. The component only ever reads it. |
| getData | (target: Float32Array) => boolean | void | — | Fill the array with the current frame instead of using an analyser. |
| value | number[] | — | Pre-computed levels per channel as amplitude 0..1. Bypasses the analyser entirely. |
| channels | number | 1 | Number of bars when metering from an analyser. |
| orientation | "vertical" | "horizontal" | "vertical" | Which way the bars run. |
| length | number | 120 | Long axis in pixels. |
| thickness | number | 10 | Width of each bar in pixels. |
| segments | number | 0 | Draw as discrete LED segments rather than a continuous gradient. |
| peakDecay | number | 0.6 | Peak-hold decay in full-scale units per second. 0 hides the tick. |
| minDecibels / maxDecibels | number | -60 / 0 | The dB range the bar spans. |
| showScale | boolean | false | Show a dB scale beside the bars. |
| labels | string[] | — | Channel captions, e.g. ["L", "R"]. |
Interaction
- Drag with pointer capture, so the gesture keeps tracking past the edge of the control.
- Shift while dragging for a fine pass; release it mid-gesture and coarse tracking resumes.
- Double-click resets to
defaultValue. - Arrow keys step normally, Shift+arrow steps finely, PageUp/PageDown jump by ten, Home/End go to the extremes.
- Proper
sliderandswitchroles with livearia-valuetext, so a screen reader announces the formatted value rather than the raw number. - The scroll wheel adjusts the value while the pointer is over the control; stepped ranges move at least one declared step per notch by default.