ProControls for p5.js

Hardware-style UI components for p5.js — sliders, knobs, VU meters, XY pads, LED displays, and switches. Four built-in visual styles, touch-ready, zero event boilerplate.

ProControls.js CustomControls.js p5.js 1.9+ ↗ Live Demo
Input

AnalogSlider

Vertical or horizontal fader with dB, raw, or percent readout. Supports spring-back and multiple visual styles.

MultiSlider

Bank of faders in one unit — ideal for EQ strips or mixer channels. Fires a single onChange with all values.

RangeSlider

Dual-handle slider for selecting a low/high range. Works vertically or horizontally.

Dial

Rotary knob with four visual styles — default, rubber, grooved, and pointer. Drag or scroll to adjust.

MultiDial

Bank of rotary knobs in horizontal or vertical layout. Single onChange fires with all values.

XYPad

Two-axis touch pad with independent X and Y ranges. Optional spring-back to center on release.

GridPad

Grid of cells with toggle, percent, or color-select modes. Supports grouping for step-sequencer layouts.

Switch

Multi-state toggle — binary on/off or n-state selector. Fires onChange with the new state index and label.

IconButton

Material icon button in momentary or toggle mode. Uses any Material Symbols icon name.

Selector

Option picker in row or arrow-dropdown style. Click to cycle or jump directly to any option.

TagSelector

Multi-select word-cloud picker. Toggle individual tags on or off; onChange reports the full selection set.

SliderSelector

Slide-to-select strip — drag or snap through a list of labeled options.

Menu

Menubar or popup with nested submenus. Anchors to any edge or floats as a context menu.

Container

Panel

Draggable, scrollable container for grouping controls. Add any control with pnl.add().

MessageDialog

Modal dialog with a message and configurable button row. Fires onButton with the index and label clicked.

InputDialog

Modal dialog with a text input field. Fires onSubmit with the entered value and onButton per button click.

Display

VUMeter

Segmented LED-style level meter. Optional fader overlay. Set .value each frame to animate.

VUDial

Arc-style level meter with optional knob overlay. Driven by setting .value each frame.

LEDMeter

Horizontal numeric LED display with configurable digit count, color, and dB or raw readout modes.

ADSRDisplay

Visual envelope display with draggable attack, decay, sustain, and release handles.