@zywave/zui-slider 4.3.2 → 4.4.0-pre.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/zui-slider.fouc.css +1 -1
- package/dist/custom-elements.json +567 -40
- package/dist/zui-slider-css.js +1 -1
- package/dist/zui-slider-css.js.map +1 -1
- package/dist/zui-slider.d.ts +43 -17
- package/dist/zui-slider.js +510 -80
- package/dist/zui-slider.js.map +1 -1
- package/docs/demo.html +130 -9
- package/lab.html +45 -1
- package/package.json +5 -2
- package/src/css/zui-slider.fouc.scss +75 -1
- package/src/zui-slider-css.js +1 -1
- package/src/zui-slider.scss +239 -29
- package/src/zui-slider.ts +557 -75
- package/test/zui-slider.test.ts +1224 -4
|
@@ -12,12 +12,146 @@
|
|
|
12
12
|
"name": "ZuiSlider",
|
|
13
13
|
"cssProperties": [
|
|
14
14
|
{
|
|
15
|
-
"description": "
|
|
15
|
+
"description": "Controls the visual dot size and thumb hit-area (hit area is 3× this value)",
|
|
16
16
|
"name": "--zui-slider-thumb-size",
|
|
17
|
-
"default": "
|
|
17
|
+
"default": "0.875rem (14px)"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"description": "Width of the floating value input above each thumb",
|
|
21
|
+
"name": "--zui-slider-input-width",
|
|
22
|
+
"default": "7ch"
|
|
18
23
|
}
|
|
19
24
|
],
|
|
20
25
|
"members": [
|
|
26
|
+
{
|
|
27
|
+
"kind": "field",
|
|
28
|
+
"name": "#defaultValue",
|
|
29
|
+
"privacy": "private",
|
|
30
|
+
"type": {
|
|
31
|
+
"text": "string"
|
|
32
|
+
},
|
|
33
|
+
"default": "'50'"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"kind": "field",
|
|
37
|
+
"name": "#defaultValueStart",
|
|
38
|
+
"privacy": "private",
|
|
39
|
+
"type": {
|
|
40
|
+
"text": "string"
|
|
41
|
+
},
|
|
42
|
+
"default": "'0'"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"kind": "field",
|
|
46
|
+
"name": "#defaultValueEnd",
|
|
47
|
+
"privacy": "private",
|
|
48
|
+
"type": {
|
|
49
|
+
"text": "string"
|
|
50
|
+
},
|
|
51
|
+
"default": "'100'"
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"kind": "field",
|
|
55
|
+
"name": "#value",
|
|
56
|
+
"privacy": "private",
|
|
57
|
+
"type": {
|
|
58
|
+
"text": "string"
|
|
59
|
+
},
|
|
60
|
+
"default": "'50'"
|
|
61
|
+
},
|
|
62
|
+
{
|
|
63
|
+
"kind": "field",
|
|
64
|
+
"name": "#valueStart",
|
|
65
|
+
"privacy": "private",
|
|
66
|
+
"type": {
|
|
67
|
+
"text": "string"
|
|
68
|
+
},
|
|
69
|
+
"default": "'0'"
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"kind": "field",
|
|
73
|
+
"name": "#valueEnd",
|
|
74
|
+
"privacy": "private",
|
|
75
|
+
"type": {
|
|
76
|
+
"text": "string"
|
|
77
|
+
},
|
|
78
|
+
"default": "'100'"
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"kind": "field",
|
|
82
|
+
"name": "#thumbInputState",
|
|
83
|
+
"privacy": "private",
|
|
84
|
+
"default": "new Map< ThumbFlag, { visible: boolean; focused: boolean; timer?: ReturnType<typeof setTimeout>; debounceTimer?: ReturnType<typeof setTimeout>; } >([ ['thumb', { visible: false, focused: false }], ['startThumb', { visible: false, focused: false }], ['endThumb', { visible: false, focused: false }], ])"
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"kind": "field",
|
|
88
|
+
"name": "#onThumbFloatingInput",
|
|
89
|
+
"privacy": "private"
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"kind": "field",
|
|
93
|
+
"name": "#onStartThumbFloatingInput",
|
|
94
|
+
"privacy": "private"
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"kind": "field",
|
|
98
|
+
"name": "#onEndThumbFloatingInput",
|
|
99
|
+
"privacy": "private"
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
"kind": "field",
|
|
103
|
+
"name": "#onThumbFloatingChange",
|
|
104
|
+
"privacy": "private"
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"kind": "field",
|
|
108
|
+
"name": "#onStartThumbFloatingChange",
|
|
109
|
+
"privacy": "private"
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"kind": "field",
|
|
113
|
+
"name": "#onEndThumbFloatingChange",
|
|
114
|
+
"privacy": "private"
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"kind": "field",
|
|
118
|
+
"name": "#onRangeStartInput",
|
|
119
|
+
"privacy": "private"
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
"kind": "field",
|
|
123
|
+
"name": "#onRangeEndInput",
|
|
124
|
+
"privacy": "private"
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"kind": "field",
|
|
128
|
+
"name": "#h",
|
|
129
|
+
"privacy": "private",
|
|
130
|
+
"type": {
|
|
131
|
+
"text": "Record<ThumbFlag, { show: () => void; hide: () => void; focus: () => void; blur: () => void }>"
|
|
132
|
+
},
|
|
133
|
+
"default": "{ thumb: { show: () => this.#showThumbInput('thumb'), hide: () => this.#scheduleHideThumbInput('thumb'), focus: () => this.#focusFloatingInput('thumb'), blur: () => this.#blurFloatingInput('thumb'), }, startThumb: { show: () => this.#showThumbInput('startThumb'), hide: () => this.#scheduleHideThumbInput('startThumb'), focus: () => this.#focusFloatingInput('startThumb'), blur: () => this.#blurFloatingInput('startThumb'), }, endThumb: { show: () => this.#showThumbInput('endThumb'), hide: () => this.#scheduleHideThumbInput('endThumb'), focus: () => this.#focusFloatingInput('endThumb'), blur: () => this.#blurFloatingInput('endThumb'), }, }"
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
"kind": "method",
|
|
137
|
+
"name": "#singleInput",
|
|
138
|
+
"privacy": "private",
|
|
139
|
+
"return": {
|
|
140
|
+
"type": {
|
|
141
|
+
"text": "HTMLInputElement"
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
"kind": "method",
|
|
147
|
+
"name": "#rangeInputs",
|
|
148
|
+
"privacy": "private",
|
|
149
|
+
"return": {
|
|
150
|
+
"type": {
|
|
151
|
+
"text": "[HTMLInputElement, HTMLInputElement]"
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
},
|
|
21
155
|
{
|
|
22
156
|
"kind": "field",
|
|
23
157
|
"name": "_focusControlSelector",
|
|
@@ -36,16 +170,28 @@
|
|
|
36
170
|
"privacy": "protected"
|
|
37
171
|
},
|
|
38
172
|
{
|
|
39
|
-
"kind": "
|
|
40
|
-
"name": "#
|
|
41
|
-
"privacy": "private"
|
|
42
|
-
"default": "`${DEFAULT_MAX / 2}`"
|
|
173
|
+
"kind": "method",
|
|
174
|
+
"name": "#clearAllThumbInputState",
|
|
175
|
+
"privacy": "private"
|
|
43
176
|
},
|
|
44
177
|
{
|
|
45
|
-
"kind": "
|
|
46
|
-
"name": "#
|
|
178
|
+
"kind": "method",
|
|
179
|
+
"name": "#clampToRange",
|
|
47
180
|
"privacy": "private",
|
|
48
|
-
"
|
|
181
|
+
"return": {
|
|
182
|
+
"type": {
|
|
183
|
+
"text": "string"
|
|
184
|
+
}
|
|
185
|
+
},
|
|
186
|
+
"parameters": [
|
|
187
|
+
{
|
|
188
|
+
"name": "rawVal",
|
|
189
|
+
"type": {
|
|
190
|
+
"text": "string"
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
],
|
|
194
|
+
"description": "Clamps a raw string value to the current [min, max] range.\nEmpty string is passed through unchanged (represents an in-progress floating input edit).\nNon-numeric strings are passed through unchanged."
|
|
49
195
|
},
|
|
50
196
|
{
|
|
51
197
|
"kind": "field",
|
|
@@ -53,7 +199,7 @@
|
|
|
53
199
|
"type": {
|
|
54
200
|
"text": "string"
|
|
55
201
|
},
|
|
56
|
-
"description": "Represents the value of the input. Can be set to a default value, and will reflect the value provided by the user when interactive with the control",
|
|
202
|
+
"description": "Represents the value of the input (single mode). Can be set to a default value, and will reflect the value provided by the user when interactive with the control",
|
|
57
203
|
"default": "'50'",
|
|
58
204
|
"attribute": "value"
|
|
59
205
|
},
|
|
@@ -64,9 +210,39 @@
|
|
|
64
210
|
"type": {
|
|
65
211
|
"text": "number"
|
|
66
212
|
},
|
|
67
|
-
"description": "Returns the value
|
|
213
|
+
"description": "Returns the value as a number. Invalid or non-numeric values are clamped to min; empty string (representing an in-progress edit) returns NaN",
|
|
68
214
|
"default": "50"
|
|
69
215
|
},
|
|
216
|
+
{
|
|
217
|
+
"kind": "field",
|
|
218
|
+
"name": "range",
|
|
219
|
+
"type": {
|
|
220
|
+
"text": "boolean"
|
|
221
|
+
},
|
|
222
|
+
"default": "false",
|
|
223
|
+
"description": "Enables range mode with two thumbs for selecting a range",
|
|
224
|
+
"attribute": "range"
|
|
225
|
+
},
|
|
226
|
+
{
|
|
227
|
+
"kind": "field",
|
|
228
|
+
"name": "valueStart",
|
|
229
|
+
"type": {
|
|
230
|
+
"text": "string"
|
|
231
|
+
},
|
|
232
|
+
"description": "Represents the start (lower) value in range mode",
|
|
233
|
+
"default": "'0'",
|
|
234
|
+
"attribute": "value-start"
|
|
235
|
+
},
|
|
236
|
+
{
|
|
237
|
+
"kind": "field",
|
|
238
|
+
"name": "valueEnd",
|
|
239
|
+
"type": {
|
|
240
|
+
"text": "string"
|
|
241
|
+
},
|
|
242
|
+
"description": "Represents the end (upper) value in range mode",
|
|
243
|
+
"default": "'100'",
|
|
244
|
+
"attribute": "value-end"
|
|
245
|
+
},
|
|
70
246
|
{
|
|
71
247
|
"kind": "field",
|
|
72
248
|
"name": "min",
|
|
@@ -74,7 +250,7 @@
|
|
|
74
250
|
"text": "number"
|
|
75
251
|
},
|
|
76
252
|
"default": "0",
|
|
77
|
-
"description": "Represents the
|
|
253
|
+
"description": "Represents the minimum permitted value",
|
|
78
254
|
"attribute": "min"
|
|
79
255
|
},
|
|
80
256
|
{
|
|
@@ -94,18 +270,48 @@
|
|
|
94
270
|
"text": "number"
|
|
95
271
|
},
|
|
96
272
|
"default": "0",
|
|
97
|
-
"description": "Represents the stepping interval
|
|
273
|
+
"description": "Represents the stepping interval; 0 means any value is allowed",
|
|
98
274
|
"attribute": "step"
|
|
99
275
|
},
|
|
100
276
|
{
|
|
101
277
|
"kind": "field",
|
|
102
|
-
"name": "
|
|
278
|
+
"name": "showMinMax",
|
|
103
279
|
"type": {
|
|
104
280
|
"text": "boolean"
|
|
105
281
|
},
|
|
106
282
|
"default": "false",
|
|
107
|
-
"description": "
|
|
108
|
-
"attribute": "
|
|
283
|
+
"description": "Shows the min and max values beneath the slider",
|
|
284
|
+
"attribute": "show-min-max"
|
|
285
|
+
},
|
|
286
|
+
{
|
|
287
|
+
"kind": "field",
|
|
288
|
+
"name": "#range",
|
|
289
|
+
"privacy": "private",
|
|
290
|
+
"readonly": true
|
|
291
|
+
},
|
|
292
|
+
{
|
|
293
|
+
"kind": "field",
|
|
294
|
+
"name": "#progressColor",
|
|
295
|
+
"privacy": "private",
|
|
296
|
+
"readonly": true
|
|
297
|
+
},
|
|
298
|
+
{
|
|
299
|
+
"kind": "method",
|
|
300
|
+
"name": "#isVisible",
|
|
301
|
+
"privacy": "private",
|
|
302
|
+
"return": {
|
|
303
|
+
"type": {
|
|
304
|
+
"text": "boolean"
|
|
305
|
+
}
|
|
306
|
+
},
|
|
307
|
+
"parameters": [
|
|
308
|
+
{
|
|
309
|
+
"name": "flag",
|
|
310
|
+
"type": {
|
|
311
|
+
"text": "ThumbFlag"
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
]
|
|
109
315
|
},
|
|
110
316
|
{
|
|
111
317
|
"kind": "field",
|
|
@@ -114,17 +320,168 @@
|
|
|
114
320
|
"type": {
|
|
115
321
|
"text": "number"
|
|
116
322
|
},
|
|
117
|
-
"description": "Determines visual placement of the slider thumb along the line",
|
|
323
|
+
"description": "Determines visual placement of the slider thumb along the line (single mode)",
|
|
118
324
|
"default": "50"
|
|
119
325
|
},
|
|
326
|
+
{
|
|
327
|
+
"kind": "field",
|
|
328
|
+
"name": "progressStart",
|
|
329
|
+
"readonly": true,
|
|
330
|
+
"type": {
|
|
331
|
+
"text": "number"
|
|
332
|
+
},
|
|
333
|
+
"description": "Determines visual placement of the start thumb in range mode",
|
|
334
|
+
"default": "0"
|
|
335
|
+
},
|
|
336
|
+
{
|
|
337
|
+
"kind": "field",
|
|
338
|
+
"name": "progressEnd",
|
|
339
|
+
"readonly": true,
|
|
340
|
+
"type": {
|
|
341
|
+
"text": "number"
|
|
342
|
+
},
|
|
343
|
+
"description": "Determines visual placement of the end thumb in range mode",
|
|
344
|
+
"default": "100"
|
|
345
|
+
},
|
|
346
|
+
{
|
|
347
|
+
"kind": "method",
|
|
348
|
+
"name": "#computeProgress",
|
|
349
|
+
"privacy": "private",
|
|
350
|
+
"return": {
|
|
351
|
+
"type": {
|
|
352
|
+
"text": "number"
|
|
353
|
+
}
|
|
354
|
+
},
|
|
355
|
+
"parameters": [
|
|
356
|
+
{
|
|
357
|
+
"name": "rawValue",
|
|
358
|
+
"type": {
|
|
359
|
+
"text": "string"
|
|
360
|
+
}
|
|
361
|
+
}
|
|
362
|
+
]
|
|
363
|
+
},
|
|
364
|
+
{
|
|
365
|
+
"kind": "method",
|
|
366
|
+
"name": "#singleTrackBackground",
|
|
367
|
+
"privacy": "private",
|
|
368
|
+
"return": {
|
|
369
|
+
"type": {
|
|
370
|
+
"text": "string"
|
|
371
|
+
}
|
|
372
|
+
},
|
|
373
|
+
"parameters": [
|
|
374
|
+
{
|
|
375
|
+
"name": "progress",
|
|
376
|
+
"type": {
|
|
377
|
+
"text": "number"
|
|
378
|
+
}
|
|
379
|
+
}
|
|
380
|
+
]
|
|
381
|
+
},
|
|
382
|
+
{
|
|
383
|
+
"kind": "method",
|
|
384
|
+
"name": "#rangeTrackBackground",
|
|
385
|
+
"privacy": "private",
|
|
386
|
+
"return": {
|
|
387
|
+
"type": {
|
|
388
|
+
"text": "string"
|
|
389
|
+
}
|
|
390
|
+
},
|
|
391
|
+
"parameters": [
|
|
392
|
+
{
|
|
393
|
+
"name": "progressStart",
|
|
394
|
+
"type": {
|
|
395
|
+
"text": "number"
|
|
396
|
+
}
|
|
397
|
+
},
|
|
398
|
+
{
|
|
399
|
+
"name": "progressEnd",
|
|
400
|
+
"type": {
|
|
401
|
+
"text": "number"
|
|
402
|
+
}
|
|
403
|
+
}
|
|
404
|
+
]
|
|
405
|
+
},
|
|
406
|
+
{
|
|
407
|
+
"kind": "method",
|
|
408
|
+
"name": "#renderSingle",
|
|
409
|
+
"privacy": "private"
|
|
410
|
+
},
|
|
411
|
+
{
|
|
412
|
+
"kind": "method",
|
|
413
|
+
"name": "#renderRange",
|
|
414
|
+
"privacy": "private"
|
|
415
|
+
},
|
|
416
|
+
{
|
|
417
|
+
"kind": "method",
|
|
418
|
+
"name": "#renderRangeInput",
|
|
419
|
+
"privacy": "private",
|
|
420
|
+
"parameters": [
|
|
421
|
+
{
|
|
422
|
+
"name": "which",
|
|
423
|
+
"type": {
|
|
424
|
+
"text": "'start' | 'end'"
|
|
425
|
+
}
|
|
426
|
+
}
|
|
427
|
+
]
|
|
428
|
+
},
|
|
429
|
+
{
|
|
430
|
+
"kind": "method",
|
|
431
|
+
"name": "#renderFloatingInput",
|
|
432
|
+
"privacy": "private",
|
|
433
|
+
"parameters": [
|
|
434
|
+
{
|
|
435
|
+
"name": "val",
|
|
436
|
+
"type": {
|
|
437
|
+
"text": "string"
|
|
438
|
+
}
|
|
439
|
+
},
|
|
440
|
+
{
|
|
441
|
+
"name": "onInput",
|
|
442
|
+
"type": {
|
|
443
|
+
"text": "(e: Event) => void"
|
|
444
|
+
}
|
|
445
|
+
},
|
|
446
|
+
{
|
|
447
|
+
"name": "onFloatingChange",
|
|
448
|
+
"type": {
|
|
449
|
+
"text": "(e: Event) => void"
|
|
450
|
+
}
|
|
451
|
+
},
|
|
452
|
+
{
|
|
453
|
+
"name": "flag",
|
|
454
|
+
"type": {
|
|
455
|
+
"text": "ThumbFlag"
|
|
456
|
+
}
|
|
457
|
+
},
|
|
458
|
+
{
|
|
459
|
+
"name": "visible",
|
|
460
|
+
"type": {
|
|
461
|
+
"text": "boolean"
|
|
462
|
+
}
|
|
463
|
+
},
|
|
464
|
+
{
|
|
465
|
+
"name": "progress",
|
|
466
|
+
"type": {
|
|
467
|
+
"text": "number"
|
|
468
|
+
}
|
|
469
|
+
}
|
|
470
|
+
]
|
|
471
|
+
},
|
|
120
472
|
{
|
|
121
473
|
"kind": "method",
|
|
122
|
-
"name": "
|
|
474
|
+
"name": "#renderStepDots",
|
|
123
475
|
"privacy": "private"
|
|
124
476
|
},
|
|
125
477
|
{
|
|
126
478
|
"kind": "method",
|
|
127
|
-
"name": "
|
|
479
|
+
"name": "#renderMinMaxLabels",
|
|
480
|
+
"privacy": "private"
|
|
481
|
+
},
|
|
482
|
+
{
|
|
483
|
+
"kind": "method",
|
|
484
|
+
"name": "#onInput",
|
|
128
485
|
"privacy": "private",
|
|
129
486
|
"parameters": [
|
|
130
487
|
{
|
|
@@ -137,32 +494,175 @@
|
|
|
137
494
|
},
|
|
138
495
|
{
|
|
139
496
|
"kind": "method",
|
|
140
|
-
"name": "
|
|
497
|
+
"name": "#onChange",
|
|
141
498
|
"privacy": "private"
|
|
142
499
|
},
|
|
143
500
|
{
|
|
144
501
|
"kind": "method",
|
|
145
|
-
"name": "
|
|
502
|
+
"name": "#processFloatingValue",
|
|
146
503
|
"privacy": "private",
|
|
504
|
+
"return": {
|
|
505
|
+
"type": {
|
|
506
|
+
"text": "string"
|
|
507
|
+
}
|
|
508
|
+
},
|
|
147
509
|
"parameters": [
|
|
148
510
|
{
|
|
149
|
-
"name": "
|
|
511
|
+
"name": "raw",
|
|
150
512
|
"type": {
|
|
151
|
-
"text": "
|
|
513
|
+
"text": "number"
|
|
514
|
+
}
|
|
515
|
+
}
|
|
516
|
+
]
|
|
517
|
+
},
|
|
518
|
+
{
|
|
519
|
+
"kind": "method",
|
|
520
|
+
"name": "#makeFloatingChange",
|
|
521
|
+
"privacy": "private",
|
|
522
|
+
"parameters": [
|
|
523
|
+
{
|
|
524
|
+
"name": "flag",
|
|
525
|
+
"type": {
|
|
526
|
+
"text": "ThumbFlag"
|
|
527
|
+
}
|
|
528
|
+
},
|
|
529
|
+
{
|
|
530
|
+
"name": "setter",
|
|
531
|
+
"type": {
|
|
532
|
+
"text": "(val: string) => void"
|
|
152
533
|
}
|
|
153
534
|
},
|
|
154
535
|
{
|
|
155
|
-
"name": "
|
|
156
|
-
"
|
|
536
|
+
"name": "dispatch",
|
|
537
|
+
"type": {
|
|
538
|
+
"text": "() => void"
|
|
539
|
+
}
|
|
540
|
+
}
|
|
541
|
+
]
|
|
542
|
+
},
|
|
543
|
+
{
|
|
544
|
+
"kind": "method",
|
|
545
|
+
"name": "#onFloatingInput",
|
|
546
|
+
"privacy": "private",
|
|
547
|
+
"parameters": [
|
|
548
|
+
{
|
|
549
|
+
"name": "flag",
|
|
157
550
|
"type": {
|
|
158
|
-
"text": "
|
|
551
|
+
"text": "ThumbFlag"
|
|
159
552
|
}
|
|
160
553
|
},
|
|
161
554
|
{
|
|
162
|
-
"name": "
|
|
163
|
-
"optional": true,
|
|
555
|
+
"name": "setter",
|
|
164
556
|
"type": {
|
|
165
|
-
"text": "
|
|
557
|
+
"text": "(val: string) => void"
|
|
558
|
+
}
|
|
559
|
+
}
|
|
560
|
+
]
|
|
561
|
+
},
|
|
562
|
+
{
|
|
563
|
+
"kind": "method",
|
|
564
|
+
"name": "#onRangeInput",
|
|
565
|
+
"privacy": "private",
|
|
566
|
+
"parameters": [
|
|
567
|
+
{
|
|
568
|
+
"name": "which",
|
|
569
|
+
"type": {
|
|
570
|
+
"text": "'start' | 'end'"
|
|
571
|
+
}
|
|
572
|
+
}
|
|
573
|
+
]
|
|
574
|
+
},
|
|
575
|
+
{
|
|
576
|
+
"kind": "method",
|
|
577
|
+
"name": "#onRangeChange",
|
|
578
|
+
"privacy": "private"
|
|
579
|
+
},
|
|
580
|
+
{
|
|
581
|
+
"kind": "method",
|
|
582
|
+
"name": "#showThumbInput",
|
|
583
|
+
"privacy": "private",
|
|
584
|
+
"parameters": [
|
|
585
|
+
{
|
|
586
|
+
"name": "flag",
|
|
587
|
+
"type": {
|
|
588
|
+
"text": "ThumbFlag"
|
|
589
|
+
}
|
|
590
|
+
}
|
|
591
|
+
]
|
|
592
|
+
},
|
|
593
|
+
{
|
|
594
|
+
"kind": "method",
|
|
595
|
+
"name": "#scheduleHideThumbInput",
|
|
596
|
+
"privacy": "private",
|
|
597
|
+
"parameters": [
|
|
598
|
+
{
|
|
599
|
+
"name": "flag",
|
|
600
|
+
"type": {
|
|
601
|
+
"text": "ThumbFlag"
|
|
602
|
+
}
|
|
603
|
+
}
|
|
604
|
+
]
|
|
605
|
+
},
|
|
606
|
+
{
|
|
607
|
+
"kind": "method",
|
|
608
|
+
"name": "#focusFloatingInput",
|
|
609
|
+
"privacy": "private",
|
|
610
|
+
"parameters": [
|
|
611
|
+
{
|
|
612
|
+
"name": "flag",
|
|
613
|
+
"type": {
|
|
614
|
+
"text": "ThumbFlag"
|
|
615
|
+
}
|
|
616
|
+
}
|
|
617
|
+
]
|
|
618
|
+
},
|
|
619
|
+
{
|
|
620
|
+
"kind": "method",
|
|
621
|
+
"name": "#blurFloatingInput",
|
|
622
|
+
"privacy": "private",
|
|
623
|
+
"parameters": [
|
|
624
|
+
{
|
|
625
|
+
"name": "flag",
|
|
626
|
+
"type": {
|
|
627
|
+
"text": "ThumbFlag"
|
|
628
|
+
}
|
|
629
|
+
}
|
|
630
|
+
]
|
|
631
|
+
},
|
|
632
|
+
{
|
|
633
|
+
"kind": "method",
|
|
634
|
+
"name": "#thumbCenterOffset",
|
|
635
|
+
"static": true,
|
|
636
|
+
"privacy": "private",
|
|
637
|
+
"return": {
|
|
638
|
+
"type": {
|
|
639
|
+
"text": "number"
|
|
640
|
+
}
|
|
641
|
+
},
|
|
642
|
+
"parameters": [
|
|
643
|
+
{
|
|
644
|
+
"name": "progress",
|
|
645
|
+
"type": {
|
|
646
|
+
"text": "number"
|
|
647
|
+
}
|
|
648
|
+
}
|
|
649
|
+
]
|
|
650
|
+
},
|
|
651
|
+
{
|
|
652
|
+
"kind": "method",
|
|
653
|
+
"name": "#thumbPositionCSS",
|
|
654
|
+
"static": true,
|
|
655
|
+
"privacy": "private",
|
|
656
|
+
"return": {
|
|
657
|
+
"type": {
|
|
658
|
+
"text": "string"
|
|
659
|
+
}
|
|
660
|
+
},
|
|
661
|
+
"parameters": [
|
|
662
|
+
{
|
|
663
|
+
"name": "progress",
|
|
664
|
+
"type": {
|
|
665
|
+
"text": "number"
|
|
166
666
|
}
|
|
167
667
|
}
|
|
168
668
|
]
|
|
@@ -210,7 +710,7 @@
|
|
|
210
710
|
"type": {
|
|
211
711
|
"text": "CustomEvent"
|
|
212
712
|
},
|
|
213
|
-
"description": "Fires when value changes
|
|
713
|
+
"description": "Fires when value changes; in single mode detail is the value string; in range mode detail is { valueStart, valueEnd }"
|
|
214
714
|
}
|
|
215
715
|
],
|
|
216
716
|
"attributes": [
|
|
@@ -250,46 +750,73 @@
|
|
|
250
750
|
"type": {
|
|
251
751
|
"text": "string"
|
|
252
752
|
},
|
|
253
|
-
"description": "Represents the value of the input. Can be set to a default value, and will reflect the value provided by the user when interactive with the control",
|
|
753
|
+
"description": "Represents the value of the input (single mode). Can be set to a default value, and will reflect the value provided by the user when interactive with the control",
|
|
254
754
|
"name": "value",
|
|
255
755
|
"default": "'50'",
|
|
256
756
|
"fieldName": "value"
|
|
257
757
|
},
|
|
258
758
|
{
|
|
259
|
-
"
|
|
759
|
+
"type": {
|
|
760
|
+
"text": "boolean"
|
|
761
|
+
},
|
|
762
|
+
"description": "Enables range mode with two thumbs for selecting a range",
|
|
763
|
+
"name": "range",
|
|
764
|
+
"default": "false",
|
|
765
|
+
"fieldName": "range"
|
|
766
|
+
},
|
|
767
|
+
{
|
|
768
|
+
"type": {
|
|
769
|
+
"text": "string"
|
|
770
|
+
},
|
|
771
|
+
"description": "Represents the start (lower) value in range mode",
|
|
772
|
+
"name": "value-start",
|
|
773
|
+
"default": "'0'",
|
|
774
|
+
"fieldName": "valueStart"
|
|
775
|
+
},
|
|
776
|
+
{
|
|
777
|
+
"type": {
|
|
778
|
+
"text": "string"
|
|
779
|
+
},
|
|
780
|
+
"description": "Represents the end (upper) value in range mode",
|
|
781
|
+
"name": "value-end",
|
|
782
|
+
"default": "'100'",
|
|
783
|
+
"fieldName": "valueEnd"
|
|
784
|
+
},
|
|
785
|
+
{
|
|
260
786
|
"type": {
|
|
261
787
|
"text": "number"
|
|
262
788
|
},
|
|
789
|
+
"description": "Represents the minimum permitted value",
|
|
790
|
+
"name": "min",
|
|
263
791
|
"default": "0",
|
|
264
|
-
"description": "Represents the maximum permitted value",
|
|
265
792
|
"fieldName": "min"
|
|
266
793
|
},
|
|
267
794
|
{
|
|
268
|
-
"name": "max",
|
|
269
795
|
"type": {
|
|
270
796
|
"text": "number"
|
|
271
797
|
},
|
|
272
|
-
"default": "100",
|
|
273
798
|
"description": "Represents the maximum permitted value",
|
|
799
|
+
"name": "max",
|
|
800
|
+
"default": "100",
|
|
274
801
|
"fieldName": "max"
|
|
275
802
|
},
|
|
276
803
|
{
|
|
277
|
-
"name": "step",
|
|
278
804
|
"type": {
|
|
279
805
|
"text": "number"
|
|
280
806
|
},
|
|
807
|
+
"description": "Represents the stepping interval; 0 means any value is allowed",
|
|
808
|
+
"name": "step",
|
|
281
809
|
"default": "0",
|
|
282
|
-
"description": "Represents the stepping interval, used both for user interface and validation purposes",
|
|
283
810
|
"fieldName": "step"
|
|
284
811
|
},
|
|
285
812
|
{
|
|
286
|
-
"name": "no-text",
|
|
287
813
|
"type": {
|
|
288
814
|
"text": "boolean"
|
|
289
815
|
},
|
|
816
|
+
"description": "Shows the min and max values beneath the slider",
|
|
817
|
+
"name": "show-min-max",
|
|
290
818
|
"default": "false",
|
|
291
|
-
"
|
|
292
|
-
"fieldName": "noText"
|
|
819
|
+
"fieldName": "showMinMax"
|
|
293
820
|
}
|
|
294
821
|
],
|
|
295
822
|
"superclass": {
|