UNPKG

2.33 kBTypeScriptView Raw
1import * as React from 'react';
2export interface SliderStepObject {
3 /** Value of the step. This value is a percentage of the slider where the tick is drawn. */
4 value: number;
5 /** The display label for the step value. This is also used for the aria-valuetext */
6 label: string;
7 /** Flag to hide the label */
8 isLabelHidden?: boolean;
9}
10export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
11 /** Additional classes added to the spinner. */
12 className?: string;
13 /** Current value */
14 value?: number;
15 /** Flag indicating if the slider is is discrete for custom steps. This will cause the slider to snap to the closest value. */
16 areCustomStepsContinuous?: boolean;
17 /** Adds disabled styling and disables the slider and the input component is present */
18 isDisabled?: boolean;
19 /** The step interval*/
20 step?: number;
21 /** Minimum permitted value */
22 min?: number;
23 /** The maximum permitted value */
24 max?: number;
25 /** Flag to indicate if boundaries should be shown for slider that does not have custom steps */
26 showBoundaries?: boolean;
27 /** Flag to indicate if ticks should be shown for slider that does not have custom steps */
28 showTicks?: boolean;
29 /** Array of custom slider step objects (value and label of each step) for the slider. */
30 customSteps?: SliderStepObject[];
31 /** Flag to show value input field */
32 isInputVisible?: boolean;
33 /** Value displayed in the input field */
34 inputValue?: number;
35 /** Aria label for the input field */
36 inputAriaLabel?: string;
37 thumbAriaLabel?: string;
38 hasTooltipOverThumb?: boolean;
39 /** Label that is place after the input field */
40 inputLabel?: string | number;
41 /** Position of the input */
42 inputPosition?: 'aboveThumb' | 'right';
43 /** Value change callback. This is called when the slider value changes */
44 onChange?: (value: number, inputValue?: number, setLocalInputValue?: React.Dispatch<React.SetStateAction<number>>) => void;
45 /** Actions placed to the left of the slider */
46 leftActions?: React.ReactNode;
47 /** Actions placed to the right of the slider */
48 rightActions?: React.ReactNode;
49}
50export declare const Slider: React.FunctionComponent<SliderProps>;
51//# sourceMappingURL=Slider.d.ts.map
\No newline at end of file