@vaadin/slider 25.1.0-alpha5 → 25.1.0-alpha6
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/slider",
|
|
3
|
-
"version": "25.1.0-
|
|
3
|
+
"version": "25.1.0-alpha6",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -34,21 +34,21 @@
|
|
|
34
34
|
],
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
37
|
-
"@vaadin/a11y-base": "25.1.0-
|
|
38
|
-
"@vaadin/component-base": "25.1.0-
|
|
39
|
-
"@vaadin/field-base": "25.1.0-
|
|
40
|
-
"@vaadin/vaadin-themable-mixin": "25.1.0-
|
|
37
|
+
"@vaadin/a11y-base": "25.1.0-alpha6",
|
|
38
|
+
"@vaadin/component-base": "25.1.0-alpha6",
|
|
39
|
+
"@vaadin/field-base": "25.1.0-alpha6",
|
|
40
|
+
"@vaadin/vaadin-themable-mixin": "25.1.0-alpha6",
|
|
41
41
|
"lit": "^3.0.0"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@vaadin/chai-plugins": "25.1.0-
|
|
45
|
-
"@vaadin/test-runner-commands": "25.1.0-
|
|
44
|
+
"@vaadin/chai-plugins": "25.1.0-alpha6",
|
|
45
|
+
"@vaadin/test-runner-commands": "25.1.0-alpha6",
|
|
46
46
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
47
|
-
"@vaadin/vaadin-lumo-styles": "25.1.0-
|
|
47
|
+
"@vaadin/vaadin-lumo-styles": "25.1.0-alpha6"
|
|
48
48
|
},
|
|
49
49
|
"web-types": [
|
|
50
50
|
"web-types.json",
|
|
51
51
|
"web-types.lit.json"
|
|
52
52
|
],
|
|
53
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "da6f4194492cbd77d18c6c1cd8d4d9f072e9ce8d"
|
|
54
54
|
}
|
|
@@ -83,6 +83,8 @@ export interface RangeSliderEventMap extends HTMLElementEventMap, RangeSliderCus
|
|
|
83
83
|
* `readonly` | Set when the slider is read-only
|
|
84
84
|
* `focused` | Set when the slider has focus
|
|
85
85
|
* `focus-ring` | Set when the slider is focused using the keyboard
|
|
86
|
+
* `start-active` | Set when the start thumb is activated with mouse or touch
|
|
87
|
+
* `end-active` | Set when the end thumb is activated with mouse or touch
|
|
86
88
|
* `start-focused` | Set when the start thumb has focus
|
|
87
89
|
* `end-focused` | Set when the end thumb has focus
|
|
88
90
|
*
|
|
@@ -50,6 +50,8 @@ import { SliderMixin } from './vaadin-slider-mixin.js';
|
|
|
50
50
|
* `readonly` | Set when the slider is read-only
|
|
51
51
|
* `focused` | Set when the slider has focus
|
|
52
52
|
* `focus-ring` | Set when the slider is focused using the keyboard
|
|
53
|
+
* `start-active` | Set when the start thumb is activated with mouse or touch
|
|
54
|
+
* `end-active` | Set when the end thumb is activated with mouse or touch
|
|
53
55
|
* `start-focused` | Set when the start thumb has focus
|
|
54
56
|
* `end-focused` | Set when the end thumb has focus
|
|
55
57
|
*
|
|
@@ -224,6 +226,9 @@ class RangeSlider extends FieldMixin(
|
|
|
224
226
|
this.__value = [...this.value];
|
|
225
227
|
this.__inputId0 = `slider-${generateUniqueId()}`;
|
|
226
228
|
this.__inputId1 = `slider-${generateUniqueId()}`;
|
|
229
|
+
|
|
230
|
+
this.addEventListener('pointerup', (e) => this.__onPointerUp(e));
|
|
231
|
+
this.addEventListener('pointercancel', (e) => this.__onPointerUp(e));
|
|
227
232
|
}
|
|
228
233
|
|
|
229
234
|
/** @protected */
|
|
@@ -235,6 +240,26 @@ class RangeSlider extends FieldMixin(
|
|
|
235
240
|
this.ariaTarget = this;
|
|
236
241
|
}
|
|
237
242
|
|
|
243
|
+
/** @private */
|
|
244
|
+
__onPointerDown(event) {
|
|
245
|
+
super.__onPointerDown(event);
|
|
246
|
+
|
|
247
|
+
const index = this._inputElements.indexOf(event.composedPath()[0]);
|
|
248
|
+
|
|
249
|
+
if (index !== -1) {
|
|
250
|
+
this.toggleAttribute('start-active', index === 0);
|
|
251
|
+
this.toggleAttribute('end-active', index === 1);
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
/** @private */
|
|
256
|
+
__onPointerUp(event) {
|
|
257
|
+
if (this._inputElements.includes(event.composedPath()[0])) {
|
|
258
|
+
this.removeAttribute('start-active');
|
|
259
|
+
this.removeAttribute('end-active');
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
|
|
238
263
|
/**
|
|
239
264
|
* Override update to render slotted `<input type="range" />`
|
|
240
265
|
* into light DOM after rendering shadow DOM.
|
|
@@ -90,7 +90,7 @@ export const SliderMixin = (superClass) =>
|
|
|
90
90
|
constructor() {
|
|
91
91
|
super();
|
|
92
92
|
|
|
93
|
-
this.addEventListener('
|
|
93
|
+
this.addEventListener('pointerdown', (e) => this.__onPointerDown(e));
|
|
94
94
|
}
|
|
95
95
|
|
|
96
96
|
/** @protected */
|
|
@@ -152,7 +152,7 @@ export const SliderMixin = (superClass) =>
|
|
|
152
152
|
* @param {PointerEvent} event
|
|
153
153
|
* @private
|
|
154
154
|
*/
|
|
155
|
-
|
|
155
|
+
__onPointerDown(event) {
|
|
156
156
|
if (!event.composedPath().includes(this.$.controls)) {
|
|
157
157
|
return;
|
|
158
158
|
}
|
package/src/vaadin-slider.d.ts
CHANGED
|
@@ -77,6 +77,7 @@ export interface SliderEventMap extends HTMLElementEventMap, SliderCustomEventMa
|
|
|
77
77
|
*
|
|
78
78
|
* Attribute | Description
|
|
79
79
|
* -------------|-------------
|
|
80
|
+
* `active` | Set when the slider is activated with mouse or touch
|
|
80
81
|
* `disabled` | Set when the slider is disabled
|
|
81
82
|
* `readonly` | Set when the slider is read-only
|
|
82
83
|
* `focused` | Set when the slider has focus
|
package/src/vaadin-slider.js
CHANGED
|
@@ -11,6 +11,7 @@ import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
|
11
11
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
12
12
|
import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
|
|
13
13
|
import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
|
|
14
|
+
import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
|
|
14
15
|
import { field } from '@vaadin/field-base/src/styles/field-base-styles.js';
|
|
15
16
|
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
16
17
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
@@ -43,6 +44,7 @@ import { SliderMixin } from './vaadin-slider-mixin.js';
|
|
|
43
44
|
*
|
|
44
45
|
* Attribute | Description
|
|
45
46
|
* -------------|-------------
|
|
47
|
+
* `active` | Set when the slider is activated with mouse or touch
|
|
46
48
|
* `disabled` | Set when the slider is disabled
|
|
47
49
|
* `readonly` | Set when the slider is read-only
|
|
48
50
|
* `focused` | Set when the slider has focus
|
|
@@ -148,9 +150,9 @@ class Slider extends FieldMixin(
|
|
|
148
150
|
|
|
149
151
|
return html`
|
|
150
152
|
<div class="vaadin-slider-container">
|
|
151
|
-
<div part="label"
|
|
153
|
+
<div part="label">
|
|
152
154
|
<slot name="label"></slot>
|
|
153
|
-
<span part="required-indicator" aria-hidden="true"></span>
|
|
155
|
+
<span part="required-indicator" aria-hidden="true" @click="${this.focus}"></span>
|
|
154
156
|
</div>
|
|
155
157
|
|
|
156
158
|
<div id="controls" style="${styleMap({ '--value': percent })}">
|
|
@@ -177,15 +179,36 @@ class Slider extends FieldMixin(
|
|
|
177
179
|
|
|
178
180
|
this.__value = [this.value];
|
|
179
181
|
this.__inputId = `slider-${generateUniqueId()}`;
|
|
182
|
+
|
|
183
|
+
this.addEventListener('pointerup', (e) => this.__onPointerUp(e));
|
|
184
|
+
this.addEventListener('pointercancel', (e) => this.__onPointerUp(e));
|
|
180
185
|
}
|
|
181
186
|
|
|
182
187
|
/** @protected */
|
|
183
|
-
|
|
184
|
-
super.
|
|
188
|
+
ready() {
|
|
189
|
+
super.ready();
|
|
185
190
|
|
|
186
191
|
const input = this.querySelector('[slot="input"]');
|
|
187
192
|
this._inputElement = input;
|
|
188
193
|
this.ariaTarget = input;
|
|
194
|
+
|
|
195
|
+
this.addController(new LabelledInputController(input, this._labelController));
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
/** @private */
|
|
199
|
+
__onPointerDown(event) {
|
|
200
|
+
super.__onPointerDown(event);
|
|
201
|
+
|
|
202
|
+
if (event.composedPath()[0] === this._inputElement) {
|
|
203
|
+
this.setAttribute('active', '');
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
/** @private */
|
|
208
|
+
__onPointerUp(event) {
|
|
209
|
+
if (event.composedPath()[0] === this._inputElement) {
|
|
210
|
+
this.removeAttribute('active');
|
|
211
|
+
}
|
|
189
212
|
}
|
|
190
213
|
|
|
191
214
|
/**
|
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-alpha6",
|
|
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 | 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-focused` | Set when the start thumb has focus\n`end-focused` | Set when the end thumb has focus\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-fill-background` |\n`--vaadin-slider-thumb-height` |\n`--vaadin-slider-thumb-width` |\n`--vaadin-slider-track-background` |\n`--vaadin-slider-track-border-radius` |\n`--vaadin-slider-track-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
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 | 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\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-fill-background` |\n`--vaadin-slider-thumb-height` |\n`--vaadin-slider-thumb-width` |\n`--vaadin-slider-track-background` |\n`--vaadin-slider-track-border-radius` |\n`--vaadin-slider-track-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
14
|
"name": "label",
|
|
@@ -348,7 +348,7 @@
|
|
|
348
348
|
},
|
|
349
349
|
{
|
|
350
350
|
"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 | 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\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-fill-background` |\n`--vaadin-slider-thumb-height` |\n`--vaadin-slider-thumb-width` |\n`--vaadin-slider-track-background` |\n`--vaadin-slider-track-border-radius` |\n`--vaadin-slider-track-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
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 | 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\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-fill-background` |\n`--vaadin-slider-thumb-height` |\n`--vaadin-slider-thumb-width` |\n`--vaadin-slider-track-background` |\n`--vaadin-slider-track-border-radius` |\n`--vaadin-slider-track-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
352
352
|
"attributes": [
|
|
353
353
|
{
|
|
354
354
|
"name": "label",
|
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-alpha6",
|
|
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 | 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-focused` | Set when the start thumb has focus\n`end-focused` | Set when the end thumb has focus\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-fill-background` |\n`--vaadin-slider-thumb-height` |\n`--vaadin-slider-thumb-width` |\n`--vaadin-slider-track-background` |\n`--vaadin-slider-track-border-radius` |\n`--vaadin-slider-track-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
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 | 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\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-fill-background` |\n`--vaadin-slider-thumb-height` |\n`--vaadin-slider-thumb-width` |\n`--vaadin-slider-track-background` |\n`--vaadin-slider-track-border-radius` |\n`--vaadin-slider-track-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
20
20
|
"extension": true,
|
|
21
21
|
"attributes": [
|
|
22
22
|
{
|
|
@@ -156,7 +156,7 @@
|
|
|
156
156
|
},
|
|
157
157
|
{
|
|
158
158
|
"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 | 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\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-fill-background` |\n`--vaadin-slider-thumb-height` |\n`--vaadin-slider-thumb-width` |\n`--vaadin-slider-track-background` |\n`--vaadin-slider-track-border-radius` |\n`--vaadin-slider-track-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
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 | 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\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-fill-background` |\n`--vaadin-slider-thumb-height` |\n`--vaadin-slider-thumb-width` |\n`--vaadin-slider-track-background` |\n`--vaadin-slider-track-border-radius` |\n`--vaadin-slider-track-height` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
160
160
|
"extension": true,
|
|
161
161
|
"attributes": [
|
|
162
162
|
{
|