An AnalogSlider is a fader — a handle you drag up and down (or left and right) to set a value. Think of it like a volume fader on a mixing board. You can drag the handle, scroll the mouse wheel, or swipe on a touchscreen. Double-click the handle to snap it back to its starting position.
The simplest way to create a slider is to write new AnalogSlider() with no options at all.
ProControls will place it on your canvas automatically and give it sensible defaults.
Try dragging the handle or scrolling over it!
x and y, ProControls figures out
where to put the control so it does not overlap other controls on your canvas. Taller-than-wide controls
are placed side by side; wider-than-tall controls stack vertically.
Pass options inside { } curly braces to customize the slider.
The most useful ones are label (the text shown on the control),
min and max (the range of values), and value
(where the handle starts). Try changing the numbers below!
style
The style option changes how the slider looks. There are three choices:
'knob' (the default cap handle), 'wheel' (a spinning cylinder —
great for pitch bend), and 'button' (a minimal round puck).
Try changing 'wheel' to 'knob' or 'button' in the editor below!
All three styles side by side:
.value
The real fun begins when you read the slider's value right inside your
draw() loop and use it to control something on screen. This example is a
complete sketch — it has its own setup() and draw(),
just like a sketch in your own project. The fader sets the base size of a circle that gently
pulses on its own; drag it and the artwork responds instantly.
slider.value in draw() is perfect for
visuals that update every frame. For one-off actions when the value changes — like logging or
triggering a sound — use the onChange and onRelease callbacks shown in
the MultiSlider section below.
A Dial is a rotary knob — exactly like the knobs you see on a synthesizer or guitar amp. Drag up to turn it clockwise, drag down to turn it counter-clockwise, or scroll the mouse wheel. The arc around the knob shows how far it has been turned. Double-click to reset to the starting value.
Just like the slider, you can create a dial with no options. ProControls places it for you and gives it a 0–1 range by default. Drag up and down on the knob to turn it.
The size option sets how big the dial is in pixels.
Setting scale: 'log' makes the range feel more natural for things like frequency —
instead of linear steps, the knob moves faster at low values and slower at high values,
which matches how human ears perceive pitch. Try turning the knob below!
The style option changes the look of the knob body. Try 'classic'
(the default — a polished cap with a dot), 'rubber' (textured grip),
'grooved' (concentric rings), or 'pointer' (a flat disc
with a thin line pointing to the value — great for panning knobs). The arc and interaction
are identical for all styles.
All four dial styles:
A dial is a natural fit for anything that rotates or speeds up. This is another
complete sketch with its own setup() and draw().
Read the knob's value in draw() to control your sketch — here the
dial sets how fast a square spins. Turn it all the way down to freeze it, or crank it up to
make it whirl.
onChange and onRelease callbacks also work on
dials — see the MultiDial section for an example that logs values as you
turn the knob.
A MultiSlider groups several faders together into one unit — like the channel
strip on a mixing board or the band controls on a graphic equalizer. All the sliders share the
same settings (range, height, style) but can have independent values. One onChange
callback fires whenever any of the sliders moves.
Give the sliders option a set of names and starting values.
ProControls creates a separate fader for each one and lines them up side by side.
The key (e.g. 'BASS') becomes the label; the number is the starting value.
Use min and max to set the shared value range for all sliders.
The height option controls how tall each fader is. Notice that for a classic
EQ, we use a negative min and positive max so the center represents "flat" (no boost or cut).
Each individual slider can have its own style by passing an object instead of
a plain number. You can also set springBack: true on a per-slider basis —
that slider will snap back to its starting value when you release it. Try the pitch
slider below: drag it and let go!
Unlike a single slider, onChange on a MultiSlider gives you an object
with the current value of every slider — not just the one that moved. The keys are the
slider labels (spaces and punctuation removed). This makes it easy to read all values in
one place, no matter which fader is moving.
eq.slider('60Hz').value,
or read all values at once with eq.values (returns the same object as onChange).
A MultiDial is exactly like a MultiSlider, but uses rotary knobs instead of
faders. Think of the bass, mid, and treble knobs on a guitar amp or the EQ section of a
synthesizer. The knobs sit on a shared panel, and any knob you turn fires the shared
onChange callback.
Give the dials option a set of names and starting values — same pattern as
MultiSlider. ProControls creates a knob for each entry and places them in a row.
Use size to control how big each knob is. The min, max,
and readout options apply to all knobs at once. Each knob can still have a
different starting value.
Pass an object instead of a number for any dial to override its style (or any
other option). This lets you mix different knob looks on the same panel — for example,
a rubber knob for volume, a grooved knob for filter cutoff, and a pointer for panning.
Just like MultiSlider, the onChange callback receives an object with every
knob's current value — no matter which one you turned. Turn any knob in the example
below to see all three values update together.
tone.dial('BASS').value,
or set multiple values at once: tone.values = { BASS: 80, MID: 40 }.
A RangeSlider has two handles — a low one and a high one — that define a range. You might use it to let the user select a frequency range for a filter, a time window to zoom into, or a brightness range for an image. The two handles cannot cross each other. Scroll the mouse wheel over either handle to adjust that end of the range.
Create a RangeSlider with no options and you get two handles at the bottom and top of the track. The colored region between them is the selected range. Drag either handle to resize the range.
Use valueLow and valueHigh to set where the two handles start.
The range is shown numerically next to each handle. Here we model a bandpass filter
where you pick a low-cut and high-cut frequency.
Set horizontal: true to flip the slider on its side — the left handle sets the
low end and the right handle sets the high end. This layout works well for selecting a
time window, a brightness range, or anything where left-to-right makes more intuitive sense.
The onChange callback for a RangeSlider receives two arguments:
lo (the low handle value) and hi (the high handle value).
Drag either handle in the example below and watch both values update in the console.
filter.valueLow and filter.valueHigh — for example inside your
draw() loop to apply the range to whatever you are drawing.