Demo

Slider

Horizontal slider for general parameter control. Suitable for pan, mix, filter cutoff, and other linear parameters.

Sizes

Sliders come in three sizes: small, medium (default), and large.

30
50
70

Controlled

A controlled slider with value managed by parent state.

50%
Current value: 50%

Pan Control

Bipolar slider for pan control (-100 to +100).

C
Pan: Center (0)

Custom Ranges & Formatting

Sliders can have any numeric range with custom value formatting.

1.0k Hz
-6.0 dB
25% dry / 75% wet

Full Width

Slider can expand to fill its container.

50%

Custom Fill Color

The fill track can be customized with any color.

60
40
80

States

Sliders have different visual states.

50
50

Step Values

Configure step size for fine or coarse adjustments.

0.50
50
50

Interactions

Multiple ways to adjust slider values.

Keyboard

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

Mouse

  • Click on track - Jump to position
  • Drag thumb - Adjust value