dB Scale
Tick marks and labels for a decibel range, shared by meters and faders.
Installation
$ pnpm dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/db-scale.json$ npx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/db-scale.json$ yarn dlx shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/db-scale.json$ bunx --bun shadcn-svelte@latest add https://juddisjudd.github.io/audiocn-svelte/r/db-scale.jsonUsage
<script lang="ts">
import { DbScale } from "#lib/components/ui/db-scale/index.js";
</script>
<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.
Anatomy
<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.
Examples
Vertical, with custom ticks
Theming
| Data attribute | On | Meaning |
|---|---|---|
data-orientation, data-side | root | Current settings |
data-major | ticks | A major tick |
Marks use bg-border and labels use text-muted-foreground.
Accessibility
The scale is decorative (aria-hidden): the meter or fader it belongs to already reports its value.
API reference
DbScale
| Prop | Type | Default |
|---|---|---|
minDb Bottom of the range, or the surrounding meter's range. | number | -60 |
maxDb Top of the range. | number | 0 |
ticks Tick values. Default: common values inside the range. | number[] | — |
taper Position law, so ticks line up with a fader. | "linear" | "audio" | Taper | "linear" |
orientation | "horizontal" | "vertical" | "horizontal" |
side Which side of the marks the labels sit on. | "start" | "end" | "end" |
labels Show labels. | boolean | true |
format Label text. Default: "+6", "0", "−12". | (db: number) => string | — |
children Your own DbScaleTick parts, in place of the ticks prop. | Snippet | — |
DbScaleTick
| Prop | Type | Default |
|---|---|---|
value Position in dB. | number | — |
major Major ticks have longer marks. | boolean | true |
children Replaces the label. | Snippet | — |