Skip to content
pixi-silk
GitHub repository
Entry point

pixi-silk/ui/dial

JogDial and Scrubber: rotary and drag-to-change number inputs.

import { JogDial, Scrubber } from 'pixi-silk/ui/dial';

Classes#

ClassDescription
JogDialA jog wheel. Press anywhere on it and drag around the centre: the value follows the angle and keeps adding up over full turns. Drag further out for finer control. A flick keeps it spinning and it slows down by itself. Past min or max it stretches like a rubber band and springs back. With a step, the value clicks through detents and each one pulses on the ring. A tap on the right half steps up, on the left half steps down. The dial is centred on its position.
ScrubberA number field you drag, like the ones in 3D and compositing tools. Drag sideways to scrub the value. Shift scrubs finely, Ctrl or Cmd snaps to the step. A tap on the left or right end steps down or up. With min and max the field fills like a slider. The top-left corner is at (0, 0).

Interfaces#

InterfaceDescription
DialStateThe reactive state of a JogDial or a Scrubber.
DialThemeColours of the dials (any Pixi colour).
JogDialOptionsOptions of JogDial.
ScrubberOptionsOptions of Scrubber.

Variables#

VariableDescription
DIAL_THEMEDark default theme with a blue fill. Override single colours with the theme option.

References#

rubberBand#

Re-exports rubberBand