UNPKG

2.73 kBTypeScriptView Raw
1import * as React from 'react';
2import type { HandlesProps } from './Handles';
3import type { AriaValueFormat, SliderClassNames, SliderStyles } from './interface';
4import type { MarkObj } from './Marks';
5/**
6 * New:
7 * - click mark to update range value
8 * - handleRender
9 * - Fix handle with count not correct
10 * - Fix pushable not work in some case
11 * - No more FindDOMNode
12 * - Move all position related style into inline style
13 * - Key: up is plus, down is minus
14 * - fix Key with step = null not align with marks
15 * - Change range should not trigger onChange
16 * - keyboard support pushable
17 */
18export interface SliderProps<ValueType = number | number[]> {
19 prefixCls?: string;
20 className?: string;
21 style?: React.CSSProperties;
22 classNames?: SliderClassNames;
23 styles?: SliderStyles;
24 disabled?: boolean;
25 keyboard?: boolean;
26 autoFocus?: boolean;
27 onFocus?: (e: React.FocusEvent<HTMLDivElement>) => void;
28 onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void;
29 range?: boolean;
30 count?: number;
31 min?: number;
32 max?: number;
33 step?: number | null;
34 value?: ValueType;
35 defaultValue?: ValueType;
36 onChange?: (value: ValueType) => void;
37 /** @deprecated It's always better to use `onChange` instead */
38 onBeforeChange?: (value: ValueType) => void;
39 /** @deprecated Use `onChangeComplete` instead */
40 onAfterChange?: (value: ValueType) => void;
41 onChangeComplete?: (value: ValueType) => void;
42 allowCross?: boolean;
43 pushable?: boolean | number;
44 /** range only */
45 draggableTrack?: boolean;
46 reverse?: boolean;
47 vertical?: boolean;
48 included?: boolean;
49 startPoint?: number;
50 /** @deprecated Please use `styles.track` instead */
51 trackStyle?: React.CSSProperties | React.CSSProperties[];
52 /** @deprecated Please use `styles.handle` instead */
53 handleStyle?: React.CSSProperties | React.CSSProperties[];
54 /** @deprecated Please use `styles.rail` instead */
55 railStyle?: React.CSSProperties;
56 dotStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
57 activeDotStyle?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
58 marks?: Record<string | number, React.ReactNode | MarkObj>;
59 dots?: boolean;
60 handleRender?: HandlesProps['handleRender'];
61 tabIndex?: number | number[];
62 ariaLabelForHandle?: string | string[];
63 ariaLabelledByForHandle?: string | string[];
64 ariaValueTextFormatterForHandle?: AriaValueFormat | AriaValueFormat[];
65}
66export interface SliderRef {
67 focus: () => void;
68 blur: () => void;
69}
70declare const Slider: React.ForwardRefExoticComponent<SliderProps<number | number[]> & React.RefAttributes<SliderRef>>;
71export default Slider;