Forms and settings

Slider

components/ui/slider

A range whose click rises in pitch with the value.

Resonance840 Hz

Stereo spread60%

Craft notes

The native range input sits on top, invisible, so keyboard and touch stay native
The scrub click rises in pitch with the value, at most one every 36 ms
Thumb and fill are drawn from the value, keeping the 18px thumb inside the track

Play it

Drag slowly from one end to the other and listen to the pitch climb, then use the arrow keys.

Sounds: scrub

Variants

Every prop combination the component supports. The chip on each card is the exact props it passes.

Units
format={v => v + " Hz"}
A formatter adds units to the readout and to screen readers.
Resonance840 Hz
Steps
step={25}
Coarse steps for settings with a few levels.
Stereo spread60%
Disabled
disabled
Shown but not adjustable.
Master volume60%