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

components/Slider

Interfaces​

MarksOptionProps​

Defined in: react/src/components/Slider/MarksOption.tsx:12

Properties​

classes?​
optional classes?: object;

Defined in: react/src/components/Slider/MarksOption.tsx:28

label?​
optional label?: string;
mark?​
optional mark?: string;
gap?​
optional gap?: string | number;

Defined in: react/src/components/Slider/MarksOption.tsx:25

Gap between mark and label. Sets --gap.

label?​
optional label?: string;

Defined in: react/src/components/Slider/MarksOption.tsx:19

Display text instead of value.

labelWidth?​
optional labelWidth?: string | number;

Defined in: react/src/components/Slider/MarksOption.tsx:27

Sets --label-width.

length?​
optional length?: string | number;

Defined in: react/src/components/Slider/MarksOption.tsx:23

Mark length. Sets --length.

styles?​
optional styles?: object;

Defined in: react/src/components/Slider/MarksOption.tsx:32

label?​
optional label?: CSSProperties;
mark?​
optional mark?: CSSProperties;
thickness?​
optional thickness?: string | number;

Defined in: react/src/components/Slider/MarksOption.tsx:21

Mark thickness. Sets --thickness.

type?​
optional type?: MarksType;

Defined in: react/src/components/Slider/MarksOption.tsx:17

value​
value: number;

Defined in: react/src/components/Slider/MarksOption.tsx:14

MarksProps​

Defined in: react/src/components/Slider/Marks.tsx:13

Properties​

children?​
optional children?: ReactNode;

Defined in: react/src/components/Slider/Marks.tsx:20

gap?​
optional gap?: string | number;

Defined in: react/src/components/Slider/Marks.tsx:18

Space between the marks and the track. Sets --gap; the theme's own spacing stands when this is omitted.

options?​
optional options?: MarksOptions;

Defined in: react/src/components/Slider/Marks.tsx:19

SliderMethods​

Defined in: react/src/components/Slider/index.tsx:141

Properties​

blur​
blur: () => void;

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

Returns​

void

focus​
focus: () => void;

Defined in: react/src/components/Slider/index.tsx:142

Returns​

void

SliderProps​

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

Properties​

children​
children: ReactNode;

Defined in: react/src/components/Slider/index.tsx:138

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 />
  </Slider.Track>
</Slider.Root>
className?​
optional className?: string;

Defined in: react/src/components/Slider/index.tsx:122

disabled?​
optional disabled?: boolean;

Defined in: react/src/components/Slider/index.tsx:116

Only the appearance will change. Please consider using with readonly. aria-disabled property is also applied.

dragSensitivity?​
optional dragSensitivity?: ModifierValue<number>;

Defined in: react/src/components/Slider/index.tsx:98

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 }
externalStyles?​
optional externalStyles?: object;

Defined in: react/src/components/Slider/index.tsx:73

Global style to apply when dragged

cursor?​
optional cursor?: Cursor;
userSelectNone?​
optional userSelectNone?: boolean;
keyboard?​
optional keyboard?: InputEventOptions | null;

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

How much one arrow key press moves the value.

Shift moves a tenth of a step by default. Name a modifier to change that, or pass a bare ['raw', 1] to use no modifier at all. A modifier amount is not snapped to step.

If null, no event will be triggered

max​
max: number;

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

min​
min: number;

Defined in: react/src/components/Slider/index.tsx:50

onChange?​
optional onChange?: (value) => void;

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

Parameters​
ParameterType
valuenumber
Returns​

void

onDragEnd?​
optional onDragEnd?: (value) => void;

Defined in: react/src/components/Slider/index.tsx:126

Parameters​
ParameterType
valuenumber
Returns​

void

onDragStart?​
optional onDragStart?: (value) => void;

Defined in: react/src/components/Slider/index.tsx:125

Parameters​
ParameterType
valuenumber
Returns​

void

readonly?​
optional readonly?: boolean;

Defined in: react/src/components/Slider/index.tsx:121

Make the value unchangeable. aria-readonly property is also applied.

reverse?​
optional reverse?: boolean;

Defined in: react/src/components/Slider/index.tsx:70

scale?​
optional scale?: Scale;

Defined in: react/src/components/Slider/index.tsx:64

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:54

style?​
optional style?: CSSProperties;

Defined in: react/src/components/Slider/index.tsx:123

value​
value: number;

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

vertical?​
optional vertical?: boolean;

Defined in: react/src/components/Slider/index.tsx:69

slider orientation aria-orientation property is also applied.

wheel?​
optional wheel?: InputEventOptions | null;

Defined in: react/src/components/Slider/index.tsx:81

wheel control option If null, no event will be triggered

SliderThumbMethods​

Defined in: react/src/components/Slider/Thumb.tsx:27

Properties​

blur​
blur: () => void;

Defined in: react/src/components/Slider/Thumb.tsx:29

Returns​

void

focus​
focus: () => void;

Defined in: react/src/components/Slider/Thumb.tsx:28

Returns​

void

SliderThumbProps​

Defined in: react/src/components/Slider/Thumb.tsx:14

Properties​

children?​
optional children?: ReactNode;

Defined in: react/src/components/Slider/Thumb.tsx:23

className?​
optional className?: string;

Defined in: react/src/components/Slider/Thumb.tsx:21

color?​
optional color?: string;

Defined in: react/src/components/Slider/Thumb.tsx:19

Size comes from the --thumb-size CSS variable on Slider.Root, so that the root can reserve the matching amount of space around the track.

ref?​
optional ref?: Ref<SliderThumbMethods>;

Defined in: react/src/components/Slider/Thumb.tsx:24

style?​
optional style?: CSSProperties;

Defined in: react/src/components/Slider/Thumb.tsx:22

SliderTrackProps​

Defined in: react/src/components/Slider/Track.tsx:12

Properties​

active?​
optional active?: string;

Defined in: react/src/components/Slider/Track.tsx:22

Colour of the part below the value. Sets --active.

children?​
optional children?: ReactNode;

Defined in: react/src/components/Slider/Track.tsx:29

<Slider.Thumb /> goes here.

className?​
optional className?: string;

Defined in: react/src/components/Slider/Track.tsx:26

inactive?​
optional inactive?: string;

Defined in: react/src/components/Slider/Track.tsx:24

Colour of the part above it. Sets --inactive.

length?​
optional length?: string | number;

Defined in: react/src/components/Slider/Track.tsx:17

How long the track is along the axis the slider runs. Sets --length; the size the theme gives it stands when this is omitted.

ref?​
optional ref?: Ref<HTMLDivElement>;

Defined in: react/src/components/Slider/Track.tsx:30

style?​
optional style?: CSSProperties;

Defined in: react/src/components/Slider/Track.tsx:27

thickness?​
optional thickness?: string | number;

Defined in: react/src/components/Slider/Track.tsx:19

How thick the track is across that axis. Sets --thickness.

Type Aliases​

MarksOptions​

type MarksOptions = 
  | ["step", MarksType]
  | [number, MarksType];

Defined in: react/src/components/Slider/type.ts:4

MarksType​

type MarksType = "mark" | "mark-number" | "number";

Defined in: react/src/components/Slider/type.ts:3

Variables​

Root​

const Root: ForwardRefExoticComponent<SliderProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SliderProps> & RefAttributes<SliderMethods>>;

Defined in: react/src/components/Slider/index.tsx:155

Slider​

const Slider: object;

Defined in: react/src/components/Slider/index.tsx:361

Customizable slider

Type Declaration​

Marks​
Marks: (__namedParameters) => Element;
Parameters​
ParameterType
__namedParametersMarksProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof MarksProps>
Returns​

Element

MarksOption​
MarksOption: (__namedParameters) => Element;
Parameters​
ParameterType
__namedParametersMarksOptionProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof MarksOptionProps>
Returns​

Element

Root​
Root: ForwardRefExoticComponent<SliderProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SliderProps> & RefAttributes<SliderMethods>>;
Thumb​
Thumb: (__namedParameters) => Element;
Parameters​
ParameterType
__namedParametersSliderThumbProps
Returns​

Element

Track​
Track: (__namedParameters) => Element;
Parameters​
ParameterType
__namedParametersSliderTrackProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof SliderTrackProps>
Returns​

Element

Functions​

useSliderContext()​

Call Signature​

function useSliderContext(): SliderContextValue;

Defined in: react/src/components/Slider/context.tsx:41

Everything here is derived during render, so there is no state to keep in sync: value comes from the props of Root and the rest follows from it.

Returns​

SliderContextValue

Call Signature​

function useSliderContext<T>(selector): T;

Defined in: react/src/components/Slider/context.tsx:42

Everything here is derived during render, so there is no state to keep in sync: value comes from the props of Root and the rest follows from it.

Type Parameters​
Type Parameter
T
Parameters​
ParameterType
selector(state) => T
Returns​

T