@vaadin/slider 25.1.0-alpha6 → 25.1.0-alpha7
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/custom-elements.json +1660 -0
- package/package.json +12 -9
- package/src/styles/vaadin-slider-base-styles.js +39 -11
- package/src/styles/vaadin-slider-bubble-overlay-base-styles.js +124 -0
- package/src/vaadin-range-slider.d.ts +60 -10
- package/src/vaadin-range-slider.js +258 -23
- package/src/vaadin-slider-bubble-overlay.js +97 -0
- package/src/vaadin-slider-bubble.d.ts +28 -0
- package/src/vaadin-slider-bubble.js +75 -0
- package/src/vaadin-slider-mixin.d.ts +13 -0
- package/src/vaadin-slider-mixin.js +95 -3
- package/src/vaadin-slider.d.ts +43 -7
- package/src/vaadin-slider.js +166 -17
- package/web-types.json +135 -3
- package/web-types.lit.json +45 -3
package/web-types.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/slider",
|
|
4
|
-
"version": "25.1.0-
|
|
4
|
+
"version": "25.1.0-alpha7",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
8
8
|
"elements": [
|
|
9
9
|
{
|
|
10
10
|
"name": "vaadin-range-slider",
|
|
11
|
-
"description": "`<vaadin-range-slider>` is a web component that represents a range slider\nfor selecting a subset of the given range.\n\n```html\n<vaadin-range-slider min=\"0\" max=\"100\" step=\"1\"></vaadin-range-slider>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-----------------\n`label` | The label element\n`required-indicator` | The required indicator element\n`helper-text` | The helper text element\n`error-message` | The error message element\n`track` | The slider track\n`track-fill` | The filled portion of the track\n`thumb` | The slider thumb (applies to both thumbs)\n`thumb-start` | The start (lower value) thumb\n`thumb-end` | The end (upper value) thumb\n\nThe following state attributes are available for styling:\n\nAttribute
|
|
11
|
+
"description": "`<vaadin-range-slider>` is a web component that represents a range slider\nfor selecting a subset of the given range.\n\n```html\n<vaadin-range-slider min=\"0\" max=\"100\" step=\"1\"></vaadin-range-slider>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-----------------\n`label` | The label element\n`required-indicator` | The required indicator element\n`helper-text` | The helper text element\n`error-message` | The error message element\n`track` | The slider track\n`track-fill` | The filled portion of the track\n`thumb` | The slider thumb (applies to both thumbs)\n`thumb-start` | The start (lower value) thumb\n`thumb-end` | The end (upper value) thumb\n`marks` | Container for min/max labels\n`min` | Minimum value label\n`max` | Maximum value label\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------------|-------------\n`disabled` | Set when the slider is disabled\n`readonly` | Set when the slider is read-only\n`focused` | Set when the slider has focus\n`focus-ring` | Set when the slider is focused using the keyboard\n`start-active` | Set when the start thumb is activated with mouse or touch\n`end-active` | Set when the end thumb is activated with mouse or touch\n`start-focused` | Set when the start thumb has focus\n`end-focused` | Set when the end thumb has focus\n`min-max-visible` | Set when the min/max labels are displayed\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n`--vaadin-field-default-width` |\n`--vaadin-input-field-error-color` |\n`--vaadin-input-field-error-font-size` |\n`--vaadin-input-field-error-font-weight` |\n`--vaadin-input-field-helper-color` |\n`--vaadin-input-field-helper-font-size` |\n`--vaadin-input-field-helper-font-weight` |\n`--vaadin-input-field-label-color` |\n`--vaadin-input-field-label-font-size` |\n`--vaadin-input-field-label-font-weight` |\n`--vaadin-input-field-required-indicator` |\n`--vaadin-slider-bubble-arrow-size` |\n`--vaadin-slider-bubble-background` |\n`--vaadin-slider-bubble-border-color` |\n`--vaadin-slider-bubble-border-radius` |\n`--vaadin-slider-bubble-border-width` |\n`--vaadin-slider-bubble-offset` |\n`--vaadin-slider-bubble-padding` |\n`--vaadin-slider-bubble-shadow` |\n`--vaadin-slider-bubble-text-color` |\n`--vaadin-slider-bubble-font-size` |\n`--vaadin-slider-bubble-font-weight` |\n`--vaadin-slider-bubble-line-height` |\n`--vaadin-slider-fill-background` |\n`--vaadin-slider-fill-border-color` |\n`--vaadin-slider-fill-border-width` |\n`--vaadin-slider-marks-color` |\n`--vaadin-slider-marks-font-size` |\n`--vaadin-slider-marks-font-weight` |\n`--vaadin-slider-thumb-border-color` |\n`--vaadin-slider-thumb-border-radius` |\n`--vaadin-slider-thumb-border-width` |\n`--vaadin-slider-thumb-cursor` |\n`--vaadin-slider-thumb-cursor-active` |\n`--vaadin-slider-thumb-height` |\n`--vaadin-slider-thumb-width` |\n`--vaadin-slider-track-background` |\n`--vaadin-slider-track-border-color` |\n`--vaadin-slider-track-border-radius` |\n`--vaadin-slider-track-border-width` |\n`--vaadin-slider-track-height` |\n\nIn order to style the slider bubble, use `<vaadin-slider-bubble>` shadow DOM parts:\n\nPart name | Description\n-----------------|----------------------\n`overlay` | The overlay container\n`content` | The overlay content\n`arrow` | Arrow pointing to the thumb\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "label",
|
|
@@ -153,6 +153,50 @@
|
|
|
153
153
|
]
|
|
154
154
|
}
|
|
155
155
|
},
|
|
156
|
+
{
|
|
157
|
+
"name": "value-always-visible",
|
|
158
|
+
"description": "When true, the value bubble is always visible,\nregardless of focus or hover state.",
|
|
159
|
+
"value": {
|
|
160
|
+
"type": [
|
|
161
|
+
"boolean",
|
|
162
|
+
"null",
|
|
163
|
+
"undefined"
|
|
164
|
+
]
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"name": "min-max-visible",
|
|
169
|
+
"description": "When true, displays the min and max values below the slider track.",
|
|
170
|
+
"value": {
|
|
171
|
+
"type": [
|
|
172
|
+
"boolean",
|
|
173
|
+
"null",
|
|
174
|
+
"undefined"
|
|
175
|
+
]
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
"name": "accessible-name-start",
|
|
180
|
+
"description": "Custom accessible name for the start (minimum) input.\nWhen not set, defaults to \"${label} min\" or \"min\" if no label.",
|
|
181
|
+
"value": {
|
|
182
|
+
"type": [
|
|
183
|
+
"string",
|
|
184
|
+
"null",
|
|
185
|
+
"undefined"
|
|
186
|
+
]
|
|
187
|
+
}
|
|
188
|
+
},
|
|
189
|
+
{
|
|
190
|
+
"name": "accessible-name-end",
|
|
191
|
+
"description": "Custom accessible name for the end (maximum) input.\nWhen not set, defaults to \"${label} max\" or \"max\" if no label.",
|
|
192
|
+
"value": {
|
|
193
|
+
"type": [
|
|
194
|
+
"string",
|
|
195
|
+
"null",
|
|
196
|
+
"undefined"
|
|
197
|
+
]
|
|
198
|
+
}
|
|
199
|
+
},
|
|
156
200
|
{
|
|
157
201
|
"name": "theme",
|
|
158
202
|
"description": "The theme variants to apply to the component.",
|
|
@@ -310,6 +354,28 @@
|
|
|
310
354
|
]
|
|
311
355
|
}
|
|
312
356
|
},
|
|
357
|
+
{
|
|
358
|
+
"name": "valueAlwaysVisible",
|
|
359
|
+
"description": "When true, the value bubble is always visible,\nregardless of focus or hover state.",
|
|
360
|
+
"value": {
|
|
361
|
+
"type": [
|
|
362
|
+
"boolean",
|
|
363
|
+
"null",
|
|
364
|
+
"undefined"
|
|
365
|
+
]
|
|
366
|
+
}
|
|
367
|
+
},
|
|
368
|
+
{
|
|
369
|
+
"name": "minMaxVisible",
|
|
370
|
+
"description": "When true, displays the min and max values below the slider track.",
|
|
371
|
+
"value": {
|
|
372
|
+
"type": [
|
|
373
|
+
"boolean",
|
|
374
|
+
"null",
|
|
375
|
+
"undefined"
|
|
376
|
+
]
|
|
377
|
+
}
|
|
378
|
+
},
|
|
313
379
|
{
|
|
314
380
|
"name": "value",
|
|
315
381
|
"description": "The value of the slider.",
|
|
@@ -320,6 +386,28 @@
|
|
|
320
386
|
"undefined"
|
|
321
387
|
]
|
|
322
388
|
}
|
|
389
|
+
},
|
|
390
|
+
{
|
|
391
|
+
"name": "accessibleNameStart",
|
|
392
|
+
"description": "Custom accessible name for the start (minimum) input.\nWhen not set, defaults to \"${label} min\" or \"min\" if no label.",
|
|
393
|
+
"value": {
|
|
394
|
+
"type": [
|
|
395
|
+
"string",
|
|
396
|
+
"null",
|
|
397
|
+
"undefined"
|
|
398
|
+
]
|
|
399
|
+
}
|
|
400
|
+
},
|
|
401
|
+
{
|
|
402
|
+
"name": "accessibleNameEnd",
|
|
403
|
+
"description": "Custom accessible name for the end (maximum) input.\nWhen not set, defaults to \"${label} max\" or \"max\" if no label.",
|
|
404
|
+
"value": {
|
|
405
|
+
"type": [
|
|
406
|
+
"string",
|
|
407
|
+
"null",
|
|
408
|
+
"undefined"
|
|
409
|
+
]
|
|
410
|
+
}
|
|
323
411
|
}
|
|
324
412
|
],
|
|
325
413
|
"events": [
|
|
@@ -348,7 +436,7 @@
|
|
|
348
436
|
},
|
|
349
437
|
{
|
|
350
438
|
"name": "vaadin-slider",
|
|
351
|
-
"description": "`<vaadin-slider>` is a web component that represents a range slider\nfor selecting numerical values within a defined range.\n\n```html\n<vaadin-slider min=\"0\" max=\"100\" step=\"1\"></vaadin-slider>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-----------------\n`label` | The label element\n`required-indicator` | The required indicator element\n`helper-text` | The helper text element\n`error-message` | The error message element\n`track` | The slider track\n`track-fill` | The filled portion of the track\n`thumb` | The slider thumb\n\nThe following state attributes are available for styling:\n\nAttribute
|
|
439
|
+
"description": "`<vaadin-slider>` is a web component that represents a range slider\nfor selecting numerical values within a defined range.\n\n```html\n<vaadin-slider min=\"0\" max=\"100\" step=\"1\"></vaadin-slider>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-----------------\n`label` | The label element\n`required-indicator` | The required indicator element\n`helper-text` | The helper text element\n`error-message` | The error message element\n`track` | The slider track\n`track-fill` | The filled portion of the track\n`thumb` | The slider thumb\n`marks` | Container for min/max labels\n`min` | Minimum value label\n`max` | Maximum value label\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------------|-------------\n`active` | Set when the slider is activated with mouse or touch\n`disabled` | Set when the slider is disabled\n`readonly` | Set when the slider is read-only\n`focused` | Set when the slider has focus\n`focus-ring` | Set when the slider is focused using the keyboard\n`min-max-visible` | Set when the min/max labels are displayed\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n`--vaadin-field-default-width` |\n`--vaadin-input-field-error-color` |\n`--vaadin-input-field-error-font-size` |\n`--vaadin-input-field-error-font-weight` |\n`--vaadin-input-field-helper-color` |\n`--vaadin-input-field-helper-font-size` |\n`--vaadin-input-field-helper-font-weight` |\n`--vaadin-input-field-label-color` |\n`--vaadin-input-field-label-font-size` |\n`--vaadin-input-field-label-font-weight` |\n`--vaadin-input-field-required-indicator` |\n`--vaadin-slider-bubble-arrow-size` |\n`--vaadin-slider-bubble-background` |\n`--vaadin-slider-bubble-border-color` |\n`--vaadin-slider-bubble-border-radius` |\n`--vaadin-slider-bubble-border-width` |\n`--vaadin-slider-bubble-offset` |\n`--vaadin-slider-bubble-padding` |\n`--vaadin-slider-bubble-shadow` |\n`--vaadin-slider-bubble-text-color` |\n`--vaadin-slider-bubble-font-size` |\n`--vaadin-slider-bubble-font-weight` |\n`--vaadin-slider-bubble-line-height` |\n`--vaadin-slider-fill-background` |\n`--vaadin-slider-fill-border-color` |\n`--vaadin-slider-fill-border-width` |\n`--vaadin-slider-marks-color` |\n`--vaadin-slider-marks-font-size` |\n`--vaadin-slider-marks-font-weight` |\n`--vaadin-slider-thumb-border-color` |\n`--vaadin-slider-thumb-border-radius` |\n`--vaadin-slider-thumb-border-width` |\n`--vaadin-slider-thumb-cursor` |\n`--vaadin-slider-thumb-cursor-active` |\n`--vaadin-slider-thumb-height` |\n`--vaadin-slider-thumb-width` |\n`--vaadin-slider-track-background` |\n`--vaadin-slider-track-border-color` |\n`--vaadin-slider-track-border-radius` |\n`--vaadin-slider-track-border-width` |\n`--vaadin-slider-track-height` |\n\nIn order to style the slider bubble, use `<vaadin-slider-bubble>` shadow DOM parts:\n\nPart name | Description\n-----------------|----------------------\n`overlay` | The overlay container\n`content` | The overlay content\n`arrow` | Arrow pointing to the thumb\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
352
440
|
"attributes": [
|
|
353
441
|
{
|
|
354
442
|
"name": "label",
|
|
@@ -493,6 +581,28 @@
|
|
|
493
581
|
]
|
|
494
582
|
}
|
|
495
583
|
},
|
|
584
|
+
{
|
|
585
|
+
"name": "value-always-visible",
|
|
586
|
+
"description": "When true, the value bubble is always visible,\nregardless of focus or hover state.",
|
|
587
|
+
"value": {
|
|
588
|
+
"type": [
|
|
589
|
+
"boolean",
|
|
590
|
+
"null",
|
|
591
|
+
"undefined"
|
|
592
|
+
]
|
|
593
|
+
}
|
|
594
|
+
},
|
|
595
|
+
{
|
|
596
|
+
"name": "min-max-visible",
|
|
597
|
+
"description": "When true, displays the min and max values below the slider track.",
|
|
598
|
+
"value": {
|
|
599
|
+
"type": [
|
|
600
|
+
"boolean",
|
|
601
|
+
"null",
|
|
602
|
+
"undefined"
|
|
603
|
+
]
|
|
604
|
+
}
|
|
605
|
+
},
|
|
496
606
|
{
|
|
497
607
|
"name": "value",
|
|
498
608
|
"description": "The value of the slider.",
|
|
@@ -661,6 +771,28 @@
|
|
|
661
771
|
]
|
|
662
772
|
}
|
|
663
773
|
},
|
|
774
|
+
{
|
|
775
|
+
"name": "valueAlwaysVisible",
|
|
776
|
+
"description": "When true, the value bubble is always visible,\nregardless of focus or hover state.",
|
|
777
|
+
"value": {
|
|
778
|
+
"type": [
|
|
779
|
+
"boolean",
|
|
780
|
+
"null",
|
|
781
|
+
"undefined"
|
|
782
|
+
]
|
|
783
|
+
}
|
|
784
|
+
},
|
|
785
|
+
{
|
|
786
|
+
"name": "minMaxVisible",
|
|
787
|
+
"description": "When true, displays the min and max values below the slider track.",
|
|
788
|
+
"value": {
|
|
789
|
+
"type": [
|
|
790
|
+
"boolean",
|
|
791
|
+
"null",
|
|
792
|
+
"undefined"
|
|
793
|
+
]
|
|
794
|
+
}
|
|
795
|
+
},
|
|
664
796
|
{
|
|
665
797
|
"name": "value",
|
|
666
798
|
"description": "The value of the slider.",
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/slider",
|
|
4
|
-
"version": "25.1.0-
|
|
4
|
+
"version": "25.1.0-alpha7",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"elements": [
|
|
17
17
|
{
|
|
18
18
|
"name": "vaadin-range-slider",
|
|
19
|
-
"description": "`<vaadin-range-slider>` is a web component that represents a range slider\nfor selecting a subset of the given range.\n\n```html\n<vaadin-range-slider min=\"0\" max=\"100\" step=\"1\"></vaadin-range-slider>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-----------------\n`label` | The label element\n`required-indicator` | The required indicator element\n`helper-text` | The helper text element\n`error-message` | The error message element\n`track` | The slider track\n`track-fill` | The filled portion of the track\n`thumb` | The slider thumb (applies to both thumbs)\n`thumb-start` | The start (lower value) thumb\n`thumb-end` | The end (upper value) thumb\n\nThe following state attributes are available for styling:\n\nAttribute
|
|
19
|
+
"description": "`<vaadin-range-slider>` is a web component that represents a range slider\nfor selecting a subset of the given range.\n\n```html\n<vaadin-range-slider min=\"0\" max=\"100\" step=\"1\"></vaadin-range-slider>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-----------------\n`label` | The label element\n`required-indicator` | The required indicator element\n`helper-text` | The helper text element\n`error-message` | The error message element\n`track` | The slider track\n`track-fill` | The filled portion of the track\n`thumb` | The slider thumb (applies to both thumbs)\n`thumb-start` | The start (lower value) thumb\n`thumb-end` | The end (upper value) thumb\n`marks` | Container for min/max labels\n`min` | Minimum value label\n`max` | Maximum value label\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------------|-------------\n`disabled` | Set when the slider is disabled\n`readonly` | Set when the slider is read-only\n`focused` | Set when the slider has focus\n`focus-ring` | Set when the slider is focused using the keyboard\n`start-active` | Set when the start thumb is activated with mouse or touch\n`end-active` | Set when the end thumb is activated with mouse or touch\n`start-focused` | Set when the start thumb has focus\n`end-focused` | Set when the end thumb has focus\n`min-max-visible` | Set when the min/max labels are displayed\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n`--vaadin-field-default-width` |\n`--vaadin-input-field-error-color` |\n`--vaadin-input-field-error-font-size` |\n`--vaadin-input-field-error-font-weight` |\n`--vaadin-input-field-helper-color` |\n`--vaadin-input-field-helper-font-size` |\n`--vaadin-input-field-helper-font-weight` |\n`--vaadin-input-field-label-color` |\n`--vaadin-input-field-label-font-size` |\n`--vaadin-input-field-label-font-weight` |\n`--vaadin-input-field-required-indicator` |\n`--vaadin-slider-bubble-arrow-size` |\n`--vaadin-slider-bubble-background` |\n`--vaadin-slider-bubble-border-color` |\n`--vaadin-slider-bubble-border-radius` |\n`--vaadin-slider-bubble-border-width` |\n`--vaadin-slider-bubble-offset` |\n`--vaadin-slider-bubble-padding` |\n`--vaadin-slider-bubble-shadow` |\n`--vaadin-slider-bubble-text-color` |\n`--vaadin-slider-bubble-font-size` |\n`--vaadin-slider-bubble-font-weight` |\n`--vaadin-slider-bubble-line-height` |\n`--vaadin-slider-fill-background` |\n`--vaadin-slider-fill-border-color` |\n`--vaadin-slider-fill-border-width` |\n`--vaadin-slider-marks-color` |\n`--vaadin-slider-marks-font-size` |\n`--vaadin-slider-marks-font-weight` |\n`--vaadin-slider-thumb-border-color` |\n`--vaadin-slider-thumb-border-radius` |\n`--vaadin-slider-thumb-border-width` |\n`--vaadin-slider-thumb-cursor` |\n`--vaadin-slider-thumb-cursor-active` |\n`--vaadin-slider-thumb-height` |\n`--vaadin-slider-thumb-width` |\n`--vaadin-slider-track-background` |\n`--vaadin-slider-track-border-color` |\n`--vaadin-slider-track-border-radius` |\n`--vaadin-slider-track-border-width` |\n`--vaadin-slider-track-height` |\n\nIn order to style the slider bubble, use `<vaadin-slider-bubble>` shadow DOM parts:\n\nPart name | Description\n-----------------|----------------------\n`overlay` | The overlay container\n`content` | The overlay content\n`arrow` | Arrow pointing to the thumb\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -54,6 +54,20 @@
|
|
|
54
54
|
"kind": "expression"
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
|
+
{
|
|
58
|
+
"name": "?valueAlwaysVisible",
|
|
59
|
+
"description": "When true, the value bubble is always visible,\nregardless of focus or hover state.",
|
|
60
|
+
"value": {
|
|
61
|
+
"kind": "expression"
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": "?minMaxVisible",
|
|
66
|
+
"description": "When true, displays the min and max values below the slider track.",
|
|
67
|
+
"value": {
|
|
68
|
+
"kind": "expression"
|
|
69
|
+
}
|
|
70
|
+
},
|
|
57
71
|
{
|
|
58
72
|
"name": ".label",
|
|
59
73
|
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|
|
@@ -117,6 +131,20 @@
|
|
|
117
131
|
"kind": "expression"
|
|
118
132
|
}
|
|
119
133
|
},
|
|
134
|
+
{
|
|
135
|
+
"name": ".accessibleNameStart",
|
|
136
|
+
"description": "Custom accessible name for the start (minimum) input.\nWhen not set, defaults to \"${label} min\" or \"min\" if no label.",
|
|
137
|
+
"value": {
|
|
138
|
+
"kind": "expression"
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"name": ".accessibleNameEnd",
|
|
143
|
+
"description": "Custom accessible name for the end (maximum) input.\nWhen not set, defaults to \"${label} max\" or \"max\" if no label.",
|
|
144
|
+
"value": {
|
|
145
|
+
"kind": "expression"
|
|
146
|
+
}
|
|
147
|
+
},
|
|
120
148
|
{
|
|
121
149
|
"name": "@validated",
|
|
122
150
|
"description": "Fired whenever the field is validated.",
|
|
@@ -156,7 +184,7 @@
|
|
|
156
184
|
},
|
|
157
185
|
{
|
|
158
186
|
"name": "vaadin-slider",
|
|
159
|
-
"description": "`<vaadin-slider>` is a web component that represents a range slider\nfor selecting numerical values within a defined range.\n\n```html\n<vaadin-slider min=\"0\" max=\"100\" step=\"1\"></vaadin-slider>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-----------------\n`label` | The label element\n`required-indicator` | The required indicator element\n`helper-text` | The helper text element\n`error-message` | The error message element\n`track` | The slider track\n`track-fill` | The filled portion of the track\n`thumb` | The slider thumb\n\nThe following state attributes are available for styling:\n\nAttribute
|
|
187
|
+
"description": "`<vaadin-slider>` is a web component that represents a range slider\nfor selecting numerical values within a defined range.\n\n```html\n<vaadin-slider min=\"0\" max=\"100\" step=\"1\"></vaadin-slider>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n---------------------|-----------------\n`label` | The label element\n`required-indicator` | The required indicator element\n`helper-text` | The helper text element\n`error-message` | The error message element\n`track` | The slider track\n`track-fill` | The filled portion of the track\n`thumb` | The slider thumb\n`marks` | Container for min/max labels\n`min` | Minimum value label\n`max` | Maximum value label\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-------------------|-------------\n`active` | Set when the slider is activated with mouse or touch\n`disabled` | Set when the slider is disabled\n`readonly` | Set when the slider is read-only\n`focused` | Set when the slider has focus\n`focus-ring` | Set when the slider is focused using the keyboard\n`min-max-visible` | Set when the min/max labels are displayed\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n`--vaadin-field-default-width` |\n`--vaadin-input-field-error-color` |\n`--vaadin-input-field-error-font-size` |\n`--vaadin-input-field-error-font-weight` |\n`--vaadin-input-field-helper-color` |\n`--vaadin-input-field-helper-font-size` |\n`--vaadin-input-field-helper-font-weight` |\n`--vaadin-input-field-label-color` |\n`--vaadin-input-field-label-font-size` |\n`--vaadin-input-field-label-font-weight` |\n`--vaadin-input-field-required-indicator` |\n`--vaadin-slider-bubble-arrow-size` |\n`--vaadin-slider-bubble-background` |\n`--vaadin-slider-bubble-border-color` |\n`--vaadin-slider-bubble-border-radius` |\n`--vaadin-slider-bubble-border-width` |\n`--vaadin-slider-bubble-offset` |\n`--vaadin-slider-bubble-padding` |\n`--vaadin-slider-bubble-shadow` |\n`--vaadin-slider-bubble-text-color` |\n`--vaadin-slider-bubble-font-size` |\n`--vaadin-slider-bubble-font-weight` |\n`--vaadin-slider-bubble-line-height` |\n`--vaadin-slider-fill-background` |\n`--vaadin-slider-fill-border-color` |\n`--vaadin-slider-fill-border-width` |\n`--vaadin-slider-marks-color` |\n`--vaadin-slider-marks-font-size` |\n`--vaadin-slider-marks-font-weight` |\n`--vaadin-slider-thumb-border-color` |\n`--vaadin-slider-thumb-border-radius` |\n`--vaadin-slider-thumb-border-width` |\n`--vaadin-slider-thumb-cursor` |\n`--vaadin-slider-thumb-cursor-active` |\n`--vaadin-slider-thumb-height` |\n`--vaadin-slider-thumb-width` |\n`--vaadin-slider-track-background` |\n`--vaadin-slider-track-border-color` |\n`--vaadin-slider-track-border-radius` |\n`--vaadin-slider-track-border-width` |\n`--vaadin-slider-track-height` |\n\nIn order to style the slider bubble, use `<vaadin-slider-bubble>` shadow DOM parts:\n\nPart name | Description\n-----------------|----------------------\n`overlay` | The overlay container\n`content` | The overlay content\n`arrow` | Arrow pointing to the thumb\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
160
188
|
"extension": true,
|
|
161
189
|
"attributes": [
|
|
162
190
|
{
|
|
@@ -194,6 +222,20 @@
|
|
|
194
222
|
"kind": "expression"
|
|
195
223
|
}
|
|
196
224
|
},
|
|
225
|
+
{
|
|
226
|
+
"name": "?valueAlwaysVisible",
|
|
227
|
+
"description": "When true, the value bubble is always visible,\nregardless of focus or hover state.",
|
|
228
|
+
"value": {
|
|
229
|
+
"kind": "expression"
|
|
230
|
+
}
|
|
231
|
+
},
|
|
232
|
+
{
|
|
233
|
+
"name": "?minMaxVisible",
|
|
234
|
+
"description": "When true, displays the min and max values below the slider track.",
|
|
235
|
+
"value": {
|
|
236
|
+
"kind": "expression"
|
|
237
|
+
}
|
|
238
|
+
},
|
|
197
239
|
{
|
|
198
240
|
"name": ".label",
|
|
199
241
|
"description": "The label text for the input node.\nWhen no light dom defined via [slot=label], this value will be used.",
|