Skip to main content

Interface: KnobProps

Defined in: react/src/components/Knob/index.tsx:47

Properties​

actionsRef?​

optional actionsRef?: Ref<KnobMethods>;

Defined in: react/src/components/Knob/index.tsx:226

Receives focus and blur. They do nothing while the knob is disabled, where the element's own focus() would still focus it. ref reaches the root element itself.

angleRange?​

optional angleRange?: number;

Defined in: react/src/components/Knob/index.tsx:177

How far the knob turns from min to max, in degrees, centred on the top.

Default​

270

changeEndDelay?​

optional changeEndDelay?: number;

Defined in: react/src/components/Knob/index.tsx:202

How long after the last wheel notch or arrow key the change counts as over, in milliseconds. Neither has an event that says it is done.

Default​

500

children​

children: ReactNode;

Defined in: react/src/components/Knob/index.tsx:217

The knob renders exactly what you compose here; there is no default markup to fall back to.

Example​

<Knob.Root value={value} min={0} max={100} onChange={setValue}>
  <Knob.SVGRoot>
    <Knob.InactiveLine />
    <Knob.ActiveLine />
    <Knob.Thumb />
  </Knob.SVGRoot>
</Knob.Root>

disabled?​

optional disabled?: boolean;

Defined in: react/src/components/Knob/index.tsx:165

Make the knob unchangeable and remove it from the tab order. The parts carry data-disabled while it is set.

dragCursor?​

optional dragCursor?: Cursor;

Defined in: react/src/components/Knob/index.tsx:97

The cursor to show while dragging. It is set on the dragged element, so it stays while the pointer is outside the knob.

Default​

'grabbing'

dragSensitivity?​

optional dragSensitivity?: ModifierValue<number>;

Defined in: react/src/components/Knob/index.tsx:124

How much a drag moves the value, per modifier key.

1 is the normal travel of 100px for the whole range; 0.1 makes the same movement cover a tenth of it. Shift is bound to 0.1 by default, to match what it does on the arrow keys.

Pressing or releasing the key mid-drag does not disturb the value: the travel so far is kept and the new sensitivity applies from there. It takes effect on the next movement, since a key on its own produces no pointer event.

Default​

{ default: 1, shift: 0.1 }

keyboard?​

optional keyboard?: ModifierValue<InputEventOption> | null;

Defined in: react/src/components/Knob/index.tsx:159

How much one arrow key press moves the value.

['raw', n] moves the value by n, and ['normalized', n] by n of the range between min and max. The result is snapped to step, except for an amount set on a modifier key, which is what lets shift move off the grid. null turns the arrow keys off.

The default moves by 1, and by 0.1 with shift. With a step above 1, raise the amount to match: 1 would round straight back to where it started, and a development build warns about it.

Default​

{ default: ['raw', 1], shift: ['raw', 0.1] }

max​

max: number;

Defined in: react/src/components/Knob/index.tsx:53

The value with the knob turned all the way up.

min​

min: number;

Defined in: react/src/components/Knob/index.tsx:51

The value with the knob turned all the way down.

onChange?​

optional onChange?: (value) => void;

Defined in: react/src/components/Knob/index.tsx:183

Called with the new value when a drag, the wheel, an arrow key or a double click moves it.

Parameters​

ParameterType
valuenumber

Returns​

void

onChangeEnd?​

optional onChangeEnd?: (value, source) => void;

Defined in: react/src/components/Knob/index.tsx:195

Called when the change ends, with the value it ended on: on release, or changeEndDelay after the last wheel notch or arrow key.

Parameters​

ParameterType
valuenumber
sourceChangeSource

Returns​

void

onChangeStart?​

optional onChangeStart?: (value, source) => void;

Defined in: react/src/components/Knob/index.tsx:190

Called when a change of the value starts — a drag, a double click, the first wheel notch or arrow key — with the value before it and what it is made with. A host recording automation can treat the control as touched from here until onChangeEnd.

Parameters​

ParameterType
valuenumber
sourceChangeSource

Returns​

void

pointerLock?​

optional pointerLock?: boolean;

Defined in: react/src/components/Knob/index.tsx:143

Hide the cursor while dragging and read the pointer movement directly, rather than letting it wander off across the screen.

A knob does not care where the pointer is, only how far it moved, and letting it wander costs twice: the cursor ends up far from the knob it is holding, and the drag stops at the edge of the screen, where the operating system pins the pointer and the coordinates stop changing. A dragSensitivity below 1 reaches that edge quickly.

Off by default because it is not free: the browser shows its own notice, Esc takes the lock back, and the request needs a user gesture and can be refused. A refused request is not an error — the drag simply carries on as an ordinary one.

Default​

false

readOnly?​

optional readOnly?: boolean;

Defined in: react/src/components/Knob/index.tsx:170

Make the knob unchangeable while leaving it focusable. The parts carry data-readonly while it is set.

resetValue?​

optional resetValue?: number | null;

Defined in: react/src/components/Knob/index.tsx:76

The value a double click restores. null turns the double click off.

Default​

startValue

scale?​

optional scale?: Scale;

Defined in: react/src/components/Knob/index.tsx:71

How the value is distributed across the travel.

Pick one of the scales from @tremolo-ui/functions: linearScale, exponentialScale, curveScale(n), symmetricSkewScale(n), or skewScale(n) for a value that has to match a JUCE parameter.

Default​

linearScale

size?​

optional size?: string | number;

Defined in: react/src/components/Knob/index.tsx:89

Width and height of the knob. Sets --knob-size; the size the theme gives it stands when this is omitted.

startValue?​

optional startValue?: number;

Defined in: react/src/components/Knob/index.tsx:83

Where the active arc starts. Put it at the centre of a bipolar control, such as a pan knob, so that the arc grows from there either way.

Default​

min

step?​

optional step?: number;

Defined in: react/src/components/Knob/index.tsx:61

Granularity of the value. A drag, the wheel and the arrow keys snap it to multiples of step.

Default​

1

style?​

optional style?: CSSProperties & object & object;

Defined in: react/src/components/Knob/index.tsx:219

Type Declaration​

--knob-size?​
optional --knob-size?: string | number;

value​

value: number;

Defined in: react/src/components/Knob/index.tsx:49

The current value. The knob shows only this, so update it from onChange.

wheel?​

optional wheel?: ModifierValue<InputEventOption> | null;

Defined in: react/src/components/Knob/index.tsx:109

How much one notch of the wheel moves the value. It only acts while the focus is inside, so that scrolling the page past the knob leaves it alone.

['raw', n] moves the value by n, and ['normalized', n] by n of the range between min and max. The result is snapped to step, except for an amount set on a modifier key ({ default: …, shift: … }). null turns the wheel off.

Default​

['raw', 1]