Knob

ic.Knob is a rotary input control for numeric values. It renders as an SVG dial with a draggable pointer, grip dot knurling, and an optional value arc that fills from the minimum position to the current value. The knob supports click-to-set, circular drag, and full keyboard navigation with arrow keys, Page Up/Down, and Home/End.

Variants

Variant sets the accent color used for the indicator line, the fill arc, and the focus ring. Pick primary for general-purpose controls, secondary for subdued knobs that blend into dense panels, success or warning for status-driven values, and destructive when the value controls something irreversible.

Size

Size controls the pixel dimensions of the dial. The three options (sm, md, lg) map to 30, 48, and 72 pixels respectively, scaling alongside the text font size. Use sm for dense instrument panels and lg when the knob is the primary control on screen.

Track and tick marks

ShowTrack draws a thin arc ring from the minimum position to the current value, giving a quick visual read of where the knob sits in its range. ShowTicks adds graduation marks evenly spaced around the dial, with TickCount controlling how many there are (capped at 60). Combining both gives a meter-like look similar to physical hardware panels.

Value label

When ShowValue is true, the current value is displayed as text. LabelPosition determines whether the label appears inside the dial (rendered as SVG text) or below it (rendered as HTML). Use LabelFormat to control the text formatting with an sprintf-style format string, for example "%.1f" for one decimal place or "%d" for integers.

Range and step

Min, Max, and Step define the value boundaries and the snap increment. Dragging or pressing arrow keys moves by one Step, while Page Up/Down jumps by 10 steps. Home and End go straight to Min and Max.

Events

Knob fires ValueChanging continuously while the user drags or presses keys, carrying the current value in the payload. This is useful for live feedback like updating a preview or sending real-time commands. In MATLAB, attach a listener with addlistener and read the value from evt.Data.value.

Custom styling

Every component exposes a .css property that lets you inject instance-level CSS directly from MATLAB. Here is a retro knob. Since the elements are individual SVG shapes, each one can be styled independently via .ic-knob__body, .ic-knob__fill, .ic-knob__indicator, .ic-knob__tick, and .ic-knob__grip-dot.

k = ic.Knob("Value", 75, "ShowValue", true, ...
    "ShowTicks", true, "TickCount", 20, "Size", "lg");

% Warm cream instrument body
k.css.style(".ic-knob__body", ...
    "fill", "#faf5ef");
k.css.style(".ic-knob__body-highlight", ...
    "fill", "#f5ede3");

% Red-to-orange VU meter fill arc
k.css.style(".ic-knob__fill", ...
    "stroke", "#d63031", ...
    "opacity", "0.9");

% Bold red indicator needle
k.css.style(".ic-knob__indicator", ...
    "stroke", "#c0392b", ...
    "stroke_width", "3");

% Warm brown tick marks
k.css.style(".ic-knob__tick", ...
    "stroke", "#8b6914", ...
    "opacity", "0.5");

% Subtle brown grip dots
k.css.style(".ic-knob__grip-dot", ...
    "fill", "#a0764a", ...
    "opacity", "0.25");

% Warm brown recessed track
k.css.style(".ic-knob__track", ...
    "stroke", "#e8dcc8");

% Warm serif-style value label
k.css.style(".ic-knob__label-bottom", ...
    "color", "#5d4037", ...
    "font_family", "Georgia, serif", ...
    "font_weight", "700");