Part of the ProControls for p5.js documentation.
A vertical fader with a draggable cap, optional scale ticks, and a live readout. Drag the cap or scroll the mouse wheel to change value. Double-click the cap to reset to the initial value.
| Option | Type | Default | Description |
|---|---|---|---|
| horizontal | boolean | false | When true, the fader runs left-to-right instead of bottom-to-top. Default width becomes 180 and default height becomes 44. showScale defaults to false in horizontal mode. |
| width | number | auto / 180 | Panel width. Vertical: auto-sized to fit tick labels when showScale is true. Horizontal: defaults to 180. |
| height | number | 180 / 44 | Panel height. Vertical default 180, horizontal default 44. |
| readout | string | 'raw' | 'raw' — numeric value · 'percent' — 0–100% · 'db' — dB relative to max (shows -∞ at min). |
| decimals | number | 2 | Decimal places for the 'raw' readout. |
| showScale | boolean | true / false | Draw tick marks and numeric labels along the track. Defaults true vertical, false horizontal. |
| style | string | 'knob' | Visual style — 'knob' (default), 'wheel' (cylinder with scrolling ribs), 'button' (minimal circular cap). Works for both vertical and horizontal orientations. See slider styles below. |
| showFader | boolean | true | Show or hide the draggable cap. false = display-only meter. |
| springBack | boolean | false | When true, the fader animates back to its initial value after mouse/touch release. |
| springDuration | number | 1.0 | Seconds for the spring animation to complete. |
| springDefault | number | value | Value to restore on double-click reset (and spring-back target). Defaults to the initial value. Override when the control is rebuilt dynamically to pin the reset point. |
| onChange | function | null | onChange(value[, control]) — called every time the value changes during interaction. |
| onRelease | function | null | onRelease(value[, control]) — called on mouse/touch release. |
scale: 'log' with a small positive min (e.g. 0.001) for a perceptually even frequency fader.Set style on any vertical AnalogSlider to change its visual. Interaction is identical across all styles.
wheel — a cylinder visible through a slot. Ribs scroll with the value position; center notches mark the midpoint. Vertical: horizontal ribs, width defaults to 50px. Horizontal: vertical ribs, full slot is draggable. Scale defaults to off.
button — a minimal thin-groove track with a spherical circular cap. Works in both orientations. Width defaults to 40px and scale defaults to off.
Several AnalogSlider faders arranged side-by-side in a single unit — useful for equalizers, mixer channel strips, or any bank of related faders. A single onChange/onRelease fires whenever any child slider changes, receiving a name → value object covering all sliders at once.
| Option | Type | Default | Description |
|---|---|---|---|
| sliders | object | {} | Each key is a slider name/label. The value is either a number (initial value) or an object with per-slider overrides (value, min, max, readout, …). |
| x | number | 20 | Left edge of the first slider. |
| y | number | 20 | Top edge of all sliders. |
| height | number | 180 | Slider height in pixels (shared by all children unless overridden per-slider). |
| min | number | 0 | Shared minimum (overridable per-slider). |
| max | number | 1 | Shared maximum (overridable per-slider). |
| readout | string | 'raw' | Shared readout format — 'raw', 'db', or 'pct' (overridable per-slider). |
| decimals | number | 2 | Shared decimal places (overridable per-slider). |
| scale | string | 'linear' | Shared scale — 'linear' or 'log' (overridable per-slider). |
| horizontal | boolean | false | When true, each child is a horizontal slider and the group stacks them vertically. Default width becomes 180 and default height becomes 44 per slider. |
| gap | number | 4 | Pixel gap between adjacent sliders. |
| label | string | '' | Group label (not drawn — available for identification). |
| name | string | auto | Identifier for this group. Each child slider also has its own name (defaults to its key with spaces/punctuation removed), which becomes the field key in .values and .slider(name). Override a child's name via its per-slider object: sliders: { freq: { name: 'f', … } }. |
| onChange | function | null | onChange({ name: value, … }[, control]) — called when any slider changes. Keys are each child slider's .name (label with spaces/punctuation removed by default). |
| onRelease | function | null | onRelease({ name: value, … }[, control]) — called on mouse/touch release. |
| style | string | 'knob' | Shared slider style — 'knob', 'wheel', or 'button'. Can be overridden per-slider. |
| springBack | boolean | false | When true, all sliders animate back to their initial values after release. Can be overridden per-slider. |
| springDuration | number | 1.0 | Seconds for the spring animation to complete. Can be overridden per-slider. |
| theme | object | {} | Shared theme override applied to all children. See Themes. |
| Property / method | Description |
|---|---|
.values | Getter — returns { name: value, … } for all sliders. Keys are each child's .name property (label with spaces/punctuation removed by default; override via name in the per-slider opts). Setter accepts the same format to update any subset. |
.slider(name) | Returns the child AnalogSlider whose .name matches, for direct access (e.g. .value, .disabled). |
.disabled | Getter/setter — propagates to all child sliders. |
Pass an object instead of a plain number for any slider to override shared options for that specific channel.
const eq = new MultiSlider({
x: 20, y: 40, height: 180,
min: -12, max: 12, readout: 'raw', decimals: 1,
sliders: {
'60Hz': 0, // plain number → uses shared min/max
'250Hz': 0,
'2kHz': { value: 3, theme: { capIndicator: '#ff6600' } }, // object → per-slider overrides
'8kHz': 0,
},
onChange: v => console.log('eq changed', v),
onRelease: v => console.log('eq released', v),
});A fader with two draggable caps that define a low/high range. Drag either cap independently; caps constrain each other so they never cross. The region between the caps is filled with the accent colour. Scroll-wheel adjusts the cap nearest the cursor. Double-click a cap to reset it to its initial value.
| Option | Type | Default | Description |
|---|---|---|---|
| x, y | number | 20, 20 | Top-left position. |
| width | number | 50 (v) / 180 (h) | Panel width in pixels. |
| height | number | 180 (v) / 44 (h) | Panel height in pixels. |
| min | number | 0 | Minimum value. |
| max | number | 1 | Maximum value. |
| valueLow | number | min | Initial lower handle value. |
| valueHigh | number | max | Initial upper handle value. |
| horizontal | boolean | false | When true, renders as a horizontal slider. Width/height defaults swap accordingly. |
| readout | string | 'raw' | Value format — 'raw', 'percent', or 'db'. |
| decimals | number | 2 | Decimal places for 'raw' readout. |
| showScale | boolean | true (v) / false (h) | Draw tick marks and value labels alongside the track. |
| showFader | boolean | true | Draw the cap handles. Set to false to show only the range fill (display-only mode). |
| label | string | '' | Caption drawn at the top of the panel. |
| onChange | function | null | onChange({lo, hi}[, control]) — called whenever either handle moves. |
| onRelease | function | null | onRelease({lo, hi}[, control]) — called on mouse/touch release. |
| disabled | boolean | false | Disables interaction and renders a translucent overlay. |
| theme | object | {} | Partial theme override. See Themes. |
| Property | Description |
|---|---|
.valueLow | Current lower value (read/write). Setting it programmatically will not fire onChange. |
.valueHigh | Current upper value (read/write). |
A rotary knob with a 270° arc sweep. Drag up/down or scroll the mouse wheel to turn it. A tooltip shows the live value while dragging. Double-click to reset to the initial value.
| Option | Type | Default | Description |
|---|---|---|---|
| size | number | 70 | Square panel size in pixels. Knob, arc, and scale all scale proportionally. |
| readout | string | 'raw' | Same as AnalogSlider: 'raw', 'percent', 'db'. |
| decimals | number | 2 | Decimal places for the 'raw' readout. |
| showScale | boolean | false | Draw tick marks and labels around the arc. Increase size if labels clip. |
| showKnob | boolean | true | Show or hide the knob body. false = arc-only display (used by VUDial). |
| style | string | 'classic' | Knob visual style — 'classic' · 'rubber' · 'grooved' · 'pointer'. See dial styles below. |
| springBack | boolean | false | When true, the knob animates back to its initial value after mouse/touch release. |
| springDuration | number | 1.0 | Seconds for the spring animation to complete. |
| onChange | function | null | onChange(value[, control]) — called every time the value changes. |
| onRelease | function | null | onRelease(value[, control]) — called on mouse/touch release. |
Set style to choose a knob visual. All styles share the same interaction and arc track — only the knob body rendering changes.
Several Dial knobs arranged side-by-side in a single unit. A single onChange/onRelease fires whenever any dial changes, receiving a name → value object. A raised bevel panel frames the group. All dials share options by default; individual dials can override with per-dial objects.
| Option | Type | Default | Description |
|---|---|---|---|
| dials | object | {} | Each key is a dial name/label. Value is a number (initial value) or an object with per-dial overrides (value, min, max, style, …). |
| x | number | 20 | Left edge of the first dial. |
| y | number | 20 | Top edge of all dials. |
| size | number | 70 | Shared dial panel size in pixels (overridable per-dial). |
| min | number | 0 | Shared minimum (overridable per-dial). |
| max | number | 1 | Shared maximum (overridable per-dial). |
| readout | string | 'raw' | Shared readout format (overridable per-dial). |
| decimals | number | 2 | Shared decimal places (overridable per-dial). |
| horizontal | boolean | true | When true (default), dials are arranged in a horizontal row. When false, dials are stacked in a vertical column. |
| style | string | 'classic' | Shared knob style — 'classic', 'rubber', 'grooved', 'pointer' (overridable per-dial). |
| gap | number | 4 | Pixel gap between adjacent dials. |
| name | string | auto | Identifier for this group. Each child dial also has its own name (defaults to its key with spaces/punctuation removed), which becomes the field key in .values and .dial(name). Override a child's name via its per-dial object: dials: { freq: { name: 'f', … } }. |
| onChange | function | null | onChange({ name: value, … }[, control]) — called when any dial changes. Keys are each child dial's .name property (label with spaces/punctuation removed by default). |
| onRelease | function | null | onRelease({ name: value, … }[, control]) — called on mouse/touch release. |
| springBack | boolean | false | When true, all dials animate back to their initial values after release. Can be overridden per-dial. |
| springDuration | number | 1.0 | Seconds for the spring animation to complete. Can be overridden per-dial. |
| theme | object | {} | Shared theme override. See Themes. |
| Property / method | Description |
|---|---|
.values | Getter — returns { name: value, … } for all dials. Keys are each child's .name property (label with spaces/punctuation removed by default; override via name in the per-dial opts). Setter accepts same format. |
.dial(name) | Returns the child Dial whose .name matches, for direct access. |
.disabled | Getter/setter — propagates to all child dials. |