Interface: SliderProps
Defined in: react/src/components/Slider/index.tsx:44
Properties
actionsRef?
optional actionsRef?: Ref<SliderMethods>;
Defined in: react/src/components/Slider/index.tsx:188
Receives focus and blur, which act on the range input inside the thumb —
the element that takes the focus — and do nothing while the slider is
disabled. ref reaches the root element itself.
changeEndDelay?
optional changeEndDelay?: number;
Defined in: react/src/components/Slider/index.tsx:169
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/Slider/index.tsx:181
The slider renders exactly what you compose here; there is no default markup to fall back to.
Example
<Slider.Root value={value} min={0} max={100} onChange={setValue}>
<Slider.Track>
<Slider.Thumb aria-label="Level" />
</Slider.Track>
</Slider.Root>
disabled?
optional disabled?: boolean;
Defined in: react/src/components/Slider/index.tsx:143
Make the slider 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/Slider/index.tsx:91
The cursor to show while dragging. It is set on the dragged element, so it stays while the pointer is outside the slider.
Default
'pointer'
dragSensitivity?
optional dragSensitivity?: ModifierValue<number>;
Defined in: react/src/components/Slider/index.tsx:121
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/Slider/index.tsx:137
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/Slider/index.tsx:50
The value at the end of the travel.
min
min: number;
Defined in: react/src/components/Slider/index.tsx:48
The value at the start of the travel.
onChange?
optional onChange?: (value) => void;
Defined in: react/src/components/Slider/index.tsx:150
Called with the new value when a drag, the wheel or an arrow key moves it.
Parameters
| Parameter | Type |
|---|---|
value | number |
Returns
void
onChangeEnd?
optional onChangeEnd?: (value, source) => void;
Defined in: react/src/components/Slider/index.tsx:162
Called when the change ends, with the value it ended on: on release, or
changeEndDelay after the last wheel notch or arrow key.
Parameters
| Parameter | Type |
|---|---|
value | number |
source | ChangeSource |
Returns
void
onChangeStart?
optional onChangeStart?: (value, source) => void;
Defined in: react/src/components/Slider/index.tsx:157
Called when a change of the value starts — a press on the track, 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
| Parameter | Type |
|---|---|
value | number |
source | ChangeSource |
Returns
void
orientation?
optional orientation?: "horizontal" | "vertical";
Defined in: react/src/components/Slider/index.tsx:76
Which way the slider runs. A vertical slider grows upwards. Every part
carries the same value as data-orientation, and the range input inside
the thumb takes its aria-orientation from it.
Default
'horizontal'
readOnly?
optional readOnly?: boolean;
Defined in: react/src/components/Slider/index.tsx:148
Make the value unchangeable.
The parts carry data-readonly while it is set.
reverse?
optional reverse?: boolean;
Defined in: react/src/components/Slider/index.tsx:83
Grow the value the other way: leftwards, or downwards when vertical. The arrow keys follow the direction on screen.
Default
false
scale?
optional scale?: Scale;
Defined in: react/src/components/Slider/index.tsx:68
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
step?
optional step?: number;
Defined in: react/src/components/Slider/index.tsx:58
Granularity of the value. A drag, the wheel and the arrow keys snap it to
multiples of step.
Default
1
value
value: number;
Defined in: react/src/components/Slider/index.tsx:46
The current value. The slider shows only this, so update it from onChange.
wheel?
optional wheel?: ModifierValue<InputEventOption> | null;
Defined in: react/src/components/Slider/index.tsx:104
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 slider 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]