Skip to main content

components/Slider

Interfaces​

ScaleOptionProps​

Defined in: components/Slider/ScaleOption.tsx:9

Properties​

classes?​
optional classes?: object;

Defined in: components/Slider/ScaleOption.tsx:24

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

Defined in: components/Slider/ScaleOption.tsx:22

Gap between mark and label.

label?​
optional label?: string;

Defined in: components/Slider/ScaleOption.tsx:16

Display text instead of value.

labelWidth?​
optional labelWidth?: string | number;

Defined in: components/Slider/ScaleOption.tsx:23

length?​
optional length?: string | number;

Defined in: components/Slider/ScaleOption.tsx:20

mark length

styles?​
optional styles?: object;

Defined in: components/Slider/ScaleOption.tsx:28

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

Defined in: components/Slider/ScaleOption.tsx:18

mark thickness

type?​
optional type?: ScaleType;

Defined in: components/Slider/ScaleOption.tsx:14

value​
value: number;

Defined in: components/Slider/ScaleOption.tsx:11

ScaleProps​

Defined in: components/Slider/Scale.tsx:10

Properties​

children?​
optional children?: ReactNode;

Defined in: components/Slider/Scale.tsx:13

gap?​
optional gap?: string | number;

Defined in: components/Slider/Scale.tsx:11

options?​
optional options?: ScaleOptions;

Defined in: components/Slider/Scale.tsx:12

SliderMethods​

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

Properties​

blur​
blur: () => void;

Defined in: components/Slider/index.tsx:100

Returns​

void

focus​
focus: () => void;

Defined in: components/Slider/index.tsx:99

Returns​

void

SliderProps​

Defined in: components/Slider/index.tsx:45

Properties​

children?​
optional children?: 
  | ReactElement<unknown, string | JSXElementConstructor<any>>
  | ReactElement<unknown, string | JSXElementConstructor<any>>[];

Defined in: components/Slider/index.tsx:94

<SliderThumb /> | <SliderTrack />

className?​
optional className?: string;

Defined in: components/Slider/index.tsx:88

disabled?​
optional disabled?: boolean;

Defined in: components/Slider/index.tsx:82

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

externalStyles?​
optional externalStyles?: object;

Defined in: components/Slider/index.tsx:62

Global style to apply when dragged

cursor?​
optional cursor?: "none" | "move" | "grabbing" | "grab" | "pointer";
userSelectNone?​
optional userSelectNone?: boolean;
keyboard?​
optional keyboard?: InputEventOption | null;

Defined in: components/Slider/index.tsx:75

keyboard control option If null, no event will be triggered

max​
max: number;

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

min​
min: number;

Defined in: components/Slider/index.tsx:48

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

Defined in: components/Slider/index.tsx:90

Parameters​
ParameterType
valuenumber
Returns​

void

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

Defined in: components/Slider/index.tsx:92

Parameters​
ParameterType
valuenumber
Returns​

void

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

Defined in: components/Slider/index.tsx:91

Parameters​
ParameterType
valuenumber
Returns​

void

readonly?​
optional readonly?: boolean;

Defined in: components/Slider/index.tsx:87

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

reverse?​
optional reverse?: boolean;

Defined in: components/Slider/index.tsx:59

skew?​
optional skew?: number;

Defined in: components/Slider/index.tsx:53

step?​
optional step?: number;

Defined in: components/Slider/index.tsx:52

style?​
optional style?: CSSProperties;

Defined in: components/Slider/index.tsx:89

value​
value: number;

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

vertical?​
optional vertical?: boolean;

Defined in: components/Slider/index.tsx:58

slider orientation aria-orientation property is also applied.

wheel?​
optional wheel?: InputEventOption | null;

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

wheel control option If null, no event will be triggered

SliderThumbMethods​

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

Properties​

blur​
blur: () => void;

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

Returns​

void

focus​
focus: () => void;

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

Returns​

void

SliderThumbProps​

Defined in: components/Slider/Thumb.tsx:12

Properties​

__percent?​
optional __percent?: number;

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

Internal

children?​
optional children?: ReactNode;

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

className?​
optional className?: string;

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

color?​
optional color?: string;

Defined in: components/Slider/Thumb.tsx:17

height?​
optional height?: string | number;

Defined in: components/Slider/Thumb.tsx:15

size?​
optional size?: string | number;

Defined in: components/Slider/Thumb.tsx:13

style?​
optional style?: CSSProperties;

Defined in: components/Slider/Thumb.tsx:20

width?​
optional width?: string | number;

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

SliderTrackProps​

Defined in: components/Slider/Track.tsx:11

Properties​

__percent?​
optional __percent?: number;

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

Internal

__thumb?​
optional __thumb?: ReactElement<unknown, string | JSXElementConstructor<any>>;

Defined in: components/Slider/Track.tsx:25

Internal

active?​
optional active?: string;

Defined in: components/Slider/Track.tsx:15

children?​
optional children?: ReactElement<unknown, string | JSXElementConstructor<any>>;

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

className?​
optional className?: string;

Defined in: components/Slider/Track.tsx:20

defaultStyle?​
optional defaultStyle?: boolean;

Defined in: components/Slider/Track.tsx:18

inactive?​
optional inactive?: string;

Defined in: components/Slider/Track.tsx:16

length?​
optional length?: string | number;

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

style?​
optional style?: CSSProperties;

Defined in: components/Slider/Track.tsx:21

thickness?​
optional thickness?: string | number;

Defined in: components/Slider/Track.tsx:13

Type Aliases​

ScaleOptions​

type ScaleOptions = 
  | ["step", ScaleType]
  | [number, ScaleType];

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

ScaleType​

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

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

Variables​

Slider​

const Slider: object;

Defined in: components/Slider/index.tsx:359

Customizable slider

Type Declaration​

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

Element

ScaleOption​
ScaleOption: (__namedParameters) => Element;
Parameters​
ParameterType
__namedParametersScaleOptionProps & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof ScaleOptionProps>
Returns​

Element

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

Element

Functions​

useSliderContext()​

function useSliderContext<T>(selector): T;

Defined in: components/Slider/context.tsx:60

Type Parameters​

Type Parameter
T

Parameters​

ParameterType
selector(state) => T

Returns​

T