メインコンテンツまでスキップ

Interface: XYPadProps

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

Two-dimensional slider component.

The per-axis settings mirror Slider, given as [x, y] tuples. A plain value applies to both axes.

Properties​

actionsRef?​

optional actionsRef?: Ref<XYPadMethods>;

Defined in: react/src/components/XYPad/index.tsx:192

Receives focus and blur, which act on the range inputs inside the thumb — the elements that take the focus — and do nothing while the pad is disabled. ref reaches the root element itself.

changeEndDelay?​

optional changeEndDelay?: number;

Defined in: react/src/components/XYPad/index.tsx:172

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/XYPad/index.tsx:185

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

Example​

<XYPad.Root value={[x, y]} min={0} max={100} onChange={setValue}>
  <XYPad.Area>
    <XYPad.Thumb />
  </XYPad.Area>
</XYPad.Root>

disabled?​

optional disabled?: boolean;

Defined in: react/src/components/XYPad/index.tsx:145

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

dragCursor?​

optional dragCursor?: Cursor;

Defined in: react/src/components/XYPad/index.tsx:139

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

Default​

'pointer'

dragSensitivity?​

optional dragSensitivity?: ModifierValue<number>;

Defined in: react/src/components/XYPad/index.tsx:114

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

1 is the pointer position itself, which is what a drag normally is here. Anything else turns the drag relative: 0.1 makes the same movement cover a tenth of the travel, so the value stops following the pointer and starts moving a tenth as fast. 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. The pointer and the value stay apart for the rest of the drag — snapping them back together on release would move the value nobody asked to move.

Default​

{ default: 1, shift: 0.1 }

keyboard?​

optional keyboard?: ModifierValue<InputEventOption> | null;

Defined in: react/src/components/XYPad/index.tsx:131

How much one arrow key press moves the value. Left and right move x, up and down move y.

['raw', n] moves the value by n, and ['normalized', n] by n of the range of that axis. 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 | readonly [number, number];

Defined in: react/src/components/XYPad/index.tsx:57

The value at the end of each axis, as [x, y] or one number for both.

min​

min: number | readonly [number, number];

Defined in: react/src/components/XYPad/index.tsx:55

The value at the start of each axis, as [x, y] or one number for both.

onChange?​

optional onChange?: (value) => void;

Defined in: react/src/components/XYPad/index.tsx:153

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

Parameters​

ParameterType
valueXY<number>

Returns​

void

onChangeEnd?​

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

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

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
valueXY<number>
sourceChangeSource

Returns​

void

onChangeStart?​

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

Defined in: react/src/components/XYPad/index.tsx:160

Called when a change of the value starts — a press on the area, 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
valueXY<number>
sourceChangeSource

Returns​

void

readOnly?​

optional readOnly?: boolean;

Defined in: react/src/components/XYPad/index.tsx:150

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

reverse?​

optional reverse?: boolean | readonly [boolean, boolean];

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

Grow an axis the other way, as [x, y] or one for both. By default x grows rightwards and y downwards. The arrow keys follow the direction on screen.

Default​

false

scale?​

optional scale?: Scale | readonly [Scale, Scale];

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

How the value of each axis is distributed across the travel, as [x, y] or one scale for both.

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

step?​

optional step?: number | readonly [number, number];

Defined in: react/src/components/XYPad/index.tsx:65

Granularity of each axis, as [x, y] or one number for both. A drag, the wheel and the arrow keys snap the value to multiples of it.

Default​

1

value​

value: XY<number>;

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

The current value as [x, y]. The pad shows only this, so update it from onChange.

wheel?​

optional wheel?: ModifierValue<InputEventOption> | null;

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

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 pad leaves it alone. Scrolling sideways, or with shift held, moves x; otherwise it moves y.

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

Default​

['raw', 1]