Demo

Fader

Vertical slider for level control, commonly used in mixers. Supports vertical/horizontal orientation and audio taper response curve.

Sizes

Faders come in three sizes: small (80px), medium (120px), and large (160px).

0.30
0.50
0.70

Controlled

A controlled fader with value managed by parent state. Drag, scroll wheel, or use arrow keys to adjust.

0.75
Current value: 0.75

Audio Taper

Professional mixer-style logarithmic taper. The visual position maps to perceived loudness, not linear amplitude.

-2.5 dB
-2.5 dB
Amplitude: 0.750dB: -2.5

Orientation

Faders can be vertical (default) or horizontal.

0.50
0.50
Value: 0.50

Custom Ranges & Formatting

Faders can have any numeric range with custom value formatting.

0.0 dB
50%
+0.0 dB

Step Values

Configure step size for fine or coarse adjustments.

0.500
50
50

States

Faders have different visual states for interaction feedback.

0.50
0.50
0.50

Value Display Options

Control whether the value is displayed below the fader.

0.50
0.50

Mixer Channel Example

How multiple faders work together in a mixer context.

-4
-5
-7
-3
-6
-4
-8
-1

Interactions

Multiple ways to adjust fader values.

Keyboard

  • Arrow Up/Right - Increase by step
  • Arrow Down/Left - Decrease by step
  • Page Up - Increase by 10 steps
  • Page Down - Decrease by 10 steps
  • Home - Jump to minimum
  • End - Jump to maximum

Mouse

  • Drag up/down - Adjust value (vertical)
  • Drag left/right - Adjust value (horizontal)
  • Scroll wheel - Fine adjustment
  • Double-click - Reset to default
  • Cmd/Ctrl + click - Reset to default