Demo

AudioScale

A unified scale component with tick marks and dB labels for faders and meters. Supports audio taper positioning and special highlighting for unity (0 dB) and clipping zones.

Basic Vertical Scale

Default dB scale from -96 to +6 dB with audio taper.

+6
0
-12
-24
-48
-60
-inf
+6
0
-12
-24
-48
-inf
+12
+6
0
-12
-24
-48

With Fader

Scale positioned next to a fader for visual reference.

+6
0
-12
-24
-48
-60
-inf
0.75
0.75
+6
0
-12
-24
-48
-60
-inf

With Meter

Scale positioned next to a meter for level reference.

+6
0
-12
-24
-48
-inf
+6
0
-12
-24
-48
-inf

Tick Side

Ticks can be positioned on either side.

Left
+6
0
-12
-24
-48
-60
-inf
Right
+6
0
-12
-24
-48
-60
-inf

Highlight Zones

Unity (0 dB) and clipping zones can be highlighted.

With highlights
+6
0
-12
-24
-48
-60
-inf
No highlights
+6
0
-12
-24
-48
-60
-inf

Taper vs Linear

Compare audio taper positioning vs linear scale.

Audio Taper
+6
0
-12
-24
-48
-60
-inf
Linear
+6
0
-12
-24
-48
-60
-inf

Audio taper places 0 dB (unity gain) at 75% height, compressing low dB values and expanding the useful -24 to +6 dB range. Linear spreads values evenly.

Custom Ticks

Define your own tick marks and labels.

Custom dB
+6
0
-6
-12
-24
-48
-60
Percentage
100%
50%
0%

Show/Hide Labels

Labels can be hidden to show only tick marks.

With labels
+6
0
-12
-24
-48
-60
-inf
Without labels

Different Lengths

Scale can be any length to match your UI needs.

80px
+6
0
-12
-24
-48
120px
+6
0
-12
-24
-48
160px
+6
0
-12
-24
-48
200px
+6
0
-12
-24
-48

Horizontal Orientation

Scale can be horizontal for pan controls or horizontal meters.

Ticks on bottom
+6
0
-12
-24
-48
Ticks on top
+6
0
-12
-24
-48

Mixer Strip Example

A typical mixer channel strip with fader, meter, and scale.

Kick
0.75
Snare
0.75
Bass
0.75

Props Reference

AudioScale configuration options.

Range

  • minDb / min - Minimum value (default: -96)
  • maxDb / max - Maximum value (default: +6)

Display

  • length - Height (vertical) or width (horizontal) in pixels
  • orientation - "vertical" or "horizontal"
  • tickSide - Position of ticks (left/right or top/bottom)
  • showLabels - Show text labels on major ticks

Behavior

  • useTaper - Use audio taper (logarithmic) positioning
  • highlightZones - Highlight unity (0 dB) and clipping zones

Custom Ticks

  • ticks - Array of { value, label, major } objects