dB Scale

InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @audiocn/db-scale

UsageCopy Anchor Link

import { DbScale } from "@/components/ui/db-scale";

<DbScale minDb={-60} maxDb={6} />

Inside a LevelMeter or Fader, use LevelMeterScale or FaderScale instead: they take the range, orientation and taper from their parent so the ticks line up.

AnatomyCopy Anchor Link

<DbScale>
  <DbScaleTick value={0} />
  <DbScaleTick value={-12} />
</DbScale>

With no children, the scale renders ticks from the ticks prop, or common values inside the range.

ExamplesCopy Anchor Link

Vertical, with custom ticksCopy Anchor Link

ThemingCopy Anchor Link

Marks use bg-border and labels use text-muted-foreground.

AccessibilityCopy Anchor Link

The scale is decorative (aria-hidden): the meter or fader it belongs to already reports its value.

API referenceCopy Anchor Link

DbScaleCopy Anchor Link

DbScaleTickCopy Anchor Link