UNPKG

@wix/design-system

Version:

@wix/design-system

www.wixdesignsystem.com

92 lines (88 loc) • 3.02 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
### allowCross - type: bool - description: Allows sliders handles to cross. ### dataHook - type: string - description: Applies a data-hook HTML attribute that can be used in the tests. ### className - type: string - description: Specifies a CSS class name to be appended to the component’s root element. ### displayMarks - type: bool - description: Controls the visibility of the marks. ### displayTooltip - type: bool - description: Controls visibility of slide handle tooltip ### id - type: string - description: Assigns an unique identifier for the root element. ### max - type: number - description: Sets the absolute maximum value of sliders range. ### min - type: number - description: Sets the absolute minimum value of the sliders range. ### marks - type: object - description: Specifies slider marks. The key determines the position, and the value determines what will show. The object structure should be either ```{ number : number}``` / ```{ number : string }``` ### onAfterChange - type: func - description: Defines a callback function which will be called when ontouchend or onmouseup is triggered. ### onBeforeChange - type: func - description: Defines a callback function which will be called when ontouchstart or onmousedown is triggered. ### onChange - type: func - description: Defines a callback function which is called upon every value change. ### rtl - type: bool - description: Adjust component for RTL. ### step - type: number - description: Specifies the interval between range values. ### pushable - type: union - description: Push surrounding handles when moving a handle (relevant for multi value sliders only). Number specifies a minimum distance between handles. ### value - type: union - description: Specifies the selected value. ### disabled - type: bool - description: Specifies whether interactions are disabled. ### startPoint - type: number - description: Specifies the starting value of a track. If undefined, the minimum value of a range is used as a starting point. ### direction - type: enum - description: Sets slider direction in either horizontal way or vertical ### ariaLabelForHandle - type: union - description: Set the aria-label attributes for slider handles. ### onFocus - type: func - description: Sets the onFocus callback for the slider's handle. ```javascript onFocus((handleValue) => ({})) ``` ### onBlur - type: func - description: Sets the onBlur callback for the slider's handle. ```javascript onBlur((handleValue) => ({})) ``` ### gradientColor - type: string - description: Converts slider to a slider with a gradient background. RGB, HEX formats or color names are accepted. ```javascript gradientColor="rgb(105, 110, 28)" gradientColor="#FFAC4B" gradientColor="pink" ``` If color cannot be parsed, fallback color will be applied ### marksLabelAlignment - type: enum - description: Sets the alignment of the marks labels. ### formatValue - type: func - description: Formats the raw value for display in tooltip.