@vaadin/slider 25.1.0-alpha4 → 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.
Files changed (8) hide show
  1. package/package.json +9 -9
  2. package/src/vaadin-range-slider.d.ts +76 -0
  3. package/src/vaadin-range-slider.js +83 -0
  4. package/src/vaadin-slider-mixin.js +13 -2
  5. package/src/vaadin-slider.d.ts +71 -0
  6. package/src/vaadin-slider.js +77 -4
  7. package/web-types.json +11 -3
  8. package/web-types.lit.json +17 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaadin/slider",
3
- "version": "25.1.0-alpha4",
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-alpha4",
38
- "@vaadin/component-base": "25.1.0-alpha4",
39
- "@vaadin/field-base": "25.1.0-alpha4",
40
- "@vaadin/vaadin-themable-mixin": "25.1.0-alpha4",
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-alpha4",
45
- "@vaadin/test-runner-commands": "25.1.0-alpha4",
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-alpha4"
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": "4fb917150617231c1acf27faabf386560dcd3bc5"
53
+ "gitHead": "da6f4194492cbd77d18c6c1cd8d4d9f072e9ce8d"
54
54
  }
package/src/vaadin-range-slider.d.ts CHANGED
@@ -16,17 +16,39 @@ export type RangeSliderChangeEvent = Event & {
16
16
  target: RangeSlider;
17
17
  };
18
18
 
19
+ /**
20
+ * Fired when the slider value changes during user interaction.
21
+ */
22
+ export type RangeSliderInputEvent = Event & {
23
+ target: RangeSlider;
24
+ };
25
+
26
+ /**
27
+ * Fired when the `invalid` property changes.
28
+ */
29
+ export type RangeSliderInvalidChangedEvent = CustomEvent<{ value: boolean }>;
30
+
19
31
  /**
20
32
  * Fired when the `value` property changes.
21
33
  */
22
34
  export type RangeSliderValueChangedEvent = CustomEvent<{ value: number[] }>;
23
35
 
36
+ /**
37
+ * Fired whenever the slider is validated.
38
+ */
39
+ export type RangeSliderValidatedEvent = CustomEvent<{ valid: boolean }>;
40
+
24
41
  export interface RangeSliderCustomEventMap {
42
+ 'invalid-changed': RangeSliderInvalidChangedEvent;
43
+
25
44
  'value-changed': RangeSliderValueChangedEvent;
45
+
46
+ validated: RangeSliderValidatedEvent;
26
47
  }
27
48
 
28
49
  export interface RangeSliderEventMap extends HTMLElementEventMap, RangeSliderCustomEventMap {
29
50
  change: RangeSliderChangeEvent;
51
+ input: RangeSliderInputEvent;
30
52
  }
31
53
 
32
54
  /**
@@ -37,7 +59,61 @@ export interface RangeSliderEventMap extends HTMLElementEventMap, RangeSliderCus
37
59
  * <vaadin-range-slider min="0" max="100" step="1"></vaadin-range-slider>
38
60
  * ```
39
61
  *
62
+ * ### Styling
63
+ *
64
+ * The following shadow DOM parts are available for styling:
65
+ *
66
+ * Part name | Description
67
+ * ---------------------|-----------------
68
+ * `label` | The label element
69
+ * `required-indicator` | The required indicator element
70
+ * `helper-text` | The helper text element
71
+ * `error-message` | The error message element
72
+ * `track` | The slider track
73
+ * `track-fill` | The filled portion of the track
74
+ * `thumb` | The slider thumb (applies to both thumbs)
75
+ * `thumb-start` | The start (lower value) thumb
76
+ * `thumb-end` | The end (upper value) thumb
77
+ *
78
+ * The following state attributes are available for styling:
79
+ *
80
+ * Attribute | Description
81
+ * ----------------|-------------
82
+ * `disabled` | Set when the slider is disabled
83
+ * `readonly` | Set when the slider is read-only
84
+ * `focused` | Set when the slider has focus
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
88
+ * `start-focused` | Set when the start thumb has focus
89
+ * `end-focused` | Set when the end thumb has focus
90
+ *
91
+ * The following custom CSS properties are available for styling:
92
+ *
93
+ * Custom CSS property |
94
+ * :--------------------------------------------|
95
+ * `--vaadin-field-default-width` |
96
+ * `--vaadin-input-field-error-color` |
97
+ * `--vaadin-input-field-error-font-size` |
98
+ * `--vaadin-input-field-error-font-weight` |
99
+ * `--vaadin-input-field-helper-color` |
100
+ * `--vaadin-input-field-helper-font-size` |
101
+ * `--vaadin-input-field-helper-font-weight` |
102
+ * `--vaadin-input-field-label-color` |
103
+ * `--vaadin-input-field-label-font-size` |
104
+ * `--vaadin-input-field-label-font-weight` |
105
+ * `--vaadin-input-field-required-indicator` |
106
+ * `--vaadin-slider-fill-background` |
107
+ * `--vaadin-slider-thumb-height` |
108
+ * `--vaadin-slider-thumb-width` |
109
+ * `--vaadin-slider-track-background` |
110
+ * `--vaadin-slider-track-border-radius` |
111
+ * `--vaadin-slider-track-height` |
112
+ *
113
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
114
+ *
40
115
  * @fires {Event} change - Fired when the user commits a value change.
116
+ * @fires {Event} input - Fired when the slider value changes during user interaction.
41
117
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
42
118
  */
43
119
  declare class RangeSlider extends FieldMixin(SliderMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement))))) {
package/src/vaadin-range-slider.js CHANGED
@@ -26,7 +26,61 @@ import { SliderMixin } from './vaadin-slider-mixin.js';
26
26
  * <vaadin-range-slider min="0" max="100" step="1"></vaadin-range-slider>
27
27
  * ```
28
28
  *
29
+ * ### Styling
30
+ *
31
+ * The following shadow DOM parts are available for styling:
32
+ *
33
+ * Part name | Description
34
+ * ---------------------|-----------------
35
+ * `label` | The label element
36
+ * `required-indicator` | The required indicator element
37
+ * `helper-text` | The helper text element
38
+ * `error-message` | The error message element
39
+ * `track` | The slider track
40
+ * `track-fill` | The filled portion of the track
41
+ * `thumb` | The slider thumb (applies to both thumbs)
42
+ * `thumb-start` | The start (lower value) thumb
43
+ * `thumb-end` | The end (upper value) thumb
44
+ *
45
+ * The following state attributes are available for styling:
46
+ *
47
+ * Attribute | Description
48
+ * ----------------|-------------
49
+ * `disabled` | Set when the slider is disabled
50
+ * `readonly` | Set when the slider is read-only
51
+ * `focused` | Set when the slider has focus
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
55
+ * `start-focused` | Set when the start thumb has focus
56
+ * `end-focused` | Set when the end thumb has focus
57
+ *
58
+ * The following custom CSS properties are available for styling:
59
+ *
60
+ * Custom CSS property |
61
+ * :--------------------------------------------|
62
+ * `--vaadin-field-default-width` |
63
+ * `--vaadin-input-field-error-color` |
64
+ * `--vaadin-input-field-error-font-size` |
65
+ * `--vaadin-input-field-error-font-weight` |
66
+ * `--vaadin-input-field-helper-color` |
67
+ * `--vaadin-input-field-helper-font-size` |
68
+ * `--vaadin-input-field-helper-font-weight` |
69
+ * `--vaadin-input-field-label-color` |
70
+ * `--vaadin-input-field-label-font-size` |
71
+ * `--vaadin-input-field-label-font-weight` |
72
+ * `--vaadin-input-field-required-indicator` |
73
+ * `--vaadin-slider-fill-background` |
74
+ * `--vaadin-slider-thumb-height` |
75
+ * `--vaadin-slider-thumb-width` |
76
+ * `--vaadin-slider-track-background` |
77
+ * `--vaadin-slider-track-border-radius` |
78
+ * `--vaadin-slider-track-height` |
79
+ *
80
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
81
+ *
29
82
  * @fires {Event} change - Fired when the user commits a value change.
83
+ * @fires {Event} input - Fired when the slider value changes during user interaction.
30
84
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
31
85
  *
32
86
  * @customElement
@@ -172,6 +226,9 @@ class RangeSlider extends FieldMixin(
172
226
  this.__value = [...this.value];
173
227
  this.__inputId0 = `slider-${generateUniqueId()}`;
174
228
  this.__inputId1 = `slider-${generateUniqueId()}`;
229
+
230
+ this.addEventListener('pointerup', (e) => this.__onPointerUp(e));
231
+ this.addEventListener('pointercancel', (e) => this.__onPointerUp(e));
175
232
  }
176
233
 
177
234
  /** @protected */
@@ -183,6 +240,26 @@ class RangeSlider extends FieldMixin(
183
240
  this.ariaTarget = this;
184
241
  }
185
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
+
186
263
  /**
187
264
  * Override update to render slotted `<input type="range" />`
188
265
  * into light DOM after rendering shadow DOM.
@@ -294,6 +371,8 @@ class RangeSlider extends FieldMixin(
294
371
 
295
372
  /** @private */
296
373
  __onStartInput(event) {
374
+ event.stopPropagation();
375
+
297
376
  // Use second input value as first input max limit
298
377
  if (parseFloat(event.target.value) > this.__value[1]) {
299
378
  event.target.value = this.__value[1];
@@ -301,11 +380,14 @@ class RangeSlider extends FieldMixin(
301
380
 
302
381
  const value = event.target.value;
303
382
  this.__updateValue(value, 0);
383
+ this.__dispatchInputEvent();
304
384
  this.__commitValue();
305
385
  }
306
386
 
307
387
  /** @private */
308
388
  __onEndInput(event) {
389
+ event.stopPropagation();
390
+
309
391
  // Use first input value as second input min limit
310
392
  if (parseFloat(event.target.value) < this.__value[0]) {
311
393
  event.target.value = this.__value[0];
@@ -313,6 +395,7 @@ class RangeSlider extends FieldMixin(
313
395
 
314
396
  const value = event.target.value;
315
397
  this.__updateValue(value, 1);
398
+ this.__dispatchInputEvent();
316
399
  this.__commitValue();
317
400
  }
318
401
 
package/src/vaadin-slider-mixin.js CHANGED
@@ -90,7 +90,7 @@ export const SliderMixin = (superClass) =>
90
90
  constructor() {
91
91
  super();
92
92
 
93
- this.addEventListener('mousedown', (e) => this.__onMouseDown(e));
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
- __onMouseDown(event) {
155
+ __onPointerDown(event) {
156
156
  if (!event.composedPath().includes(this.$.controls)) {
157
157
  return;
158
158
  }
@@ -163,6 +163,11 @@ export const SliderMixin = (superClass) =>
163
163
  }
164
164
  }
165
165
 
166
+ /** @private */
167
+ __dispatchInputEvent() {
168
+ this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
169
+ }
170
+
166
171
  /** @private */
167
172
  __detectAndDispatchChange() {
168
173
  if (JSON.stringify(this.__lastCommittedValue) !== JSON.stringify(this.value)) {
@@ -180,6 +185,12 @@ export const SliderMixin = (superClass) =>
180
185
  this.__detectAndDispatchChange();
181
186
  }
182
187
 
188
+ /**
189
+ * Fired when the slider value changes during user interaction.
190
+ *
191
+ * @event input
192
+ */
193
+
183
194
  /**
184
195
  * Fired when the user commits a value change.
185
196
  *
package/src/vaadin-slider.d.ts CHANGED
@@ -16,17 +16,39 @@ export type SliderChangeEvent = Event & {
16
16
  target: Slider;
17
17
  };
18
18
 
19
+ /**
20
+ * Fired when the slider value changes during user interaction.
21
+ */
22
+ export type SliderInputEvent = Event & {
23
+ target: Slider;
24
+ };
25
+
26
+ /**
27
+ * Fired when the `invalid` property changes.
28
+ */
29
+ export type SliderInvalidChangedEvent = CustomEvent<{ value: boolean }>;
30
+
19
31
  /**
20
32
  * Fired when the `value` property changes.
21
33
  */
22
34
  export type SliderValueChangedEvent = CustomEvent<{ value: number }>;
23
35
 
36
+ /**
37
+ * Fired whenever the slider is validated.
38
+ */
39
+ export type SliderValidatedEvent = CustomEvent<{ valid: boolean }>;
40
+
24
41
  export interface SliderCustomEventMap {
42
+ 'invalid-changed': SliderInvalidChangedEvent;
43
+
25
44
  'value-changed': SliderValueChangedEvent;
45
+
46
+ validated: SliderValidatedEvent;
26
47
  }
27
48
 
28
49
  export interface SliderEventMap extends HTMLElementEventMap, SliderCustomEventMap {
29
50
  change: SliderChangeEvent;
51
+ input: SliderInputEvent;
30
52
  }
31
53
 
32
54
  /**
@@ -37,7 +59,56 @@ export interface SliderEventMap extends HTMLElementEventMap, SliderCustomEventMa
37
59
  * <vaadin-slider min="0" max="100" step="1"></vaadin-slider>
38
60
  * ```
39
61
  *
62
+ * ### Styling
63
+ *
64
+ * The following shadow DOM parts are available for styling:
65
+ *
66
+ * Part name | Description
67
+ * ---------------------|-----------------
68
+ * `label` | The label element
69
+ * `required-indicator` | The required indicator element
70
+ * `helper-text` | The helper text element
71
+ * `error-message` | The error message element
72
+ * `track` | The slider track
73
+ * `track-fill` | The filled portion of the track
74
+ * `thumb` | The slider thumb
75
+ *
76
+ * The following state attributes are available for styling:
77
+ *
78
+ * Attribute | Description
79
+ * -------------|-------------
80
+ * `active` | Set when the slider is activated with mouse or touch
81
+ * `disabled` | Set when the slider is disabled
82
+ * `readonly` | Set when the slider is read-only
83
+ * `focused` | Set when the slider has focus
84
+ * `focus-ring` | Set when the slider is focused using the keyboard
85
+ *
86
+ * The following custom CSS properties are available for styling:
87
+ *
88
+ * Custom CSS property |
89
+ * :--------------------------------------------|
90
+ * `--vaadin-field-default-width` |
91
+ * `--vaadin-input-field-error-color` |
92
+ * `--vaadin-input-field-error-font-size` |
93
+ * `--vaadin-input-field-error-font-weight` |
94
+ * `--vaadin-input-field-helper-color` |
95
+ * `--vaadin-input-field-helper-font-size` |
96
+ * `--vaadin-input-field-helper-font-weight` |
97
+ * `--vaadin-input-field-label-color` |
98
+ * `--vaadin-input-field-label-font-size` |
99
+ * `--vaadin-input-field-label-font-weight` |
100
+ * `--vaadin-input-field-required-indicator` |
101
+ * `--vaadin-slider-fill-background` |
102
+ * `--vaadin-slider-thumb-height` |
103
+ * `--vaadin-slider-thumb-width` |
104
+ * `--vaadin-slider-track-background` |
105
+ * `--vaadin-slider-track-border-radius` |
106
+ * `--vaadin-slider-track-height` |
107
+ *
108
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
109
+ *
40
110
  * @fires {Event} change - Fired when the user commits a value change.
111
+ * @fires {Event} input - Fired when the slider value changes during user interaction.
41
112
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
42
113
  */
43
114
  declare class Slider extends FieldMixin(SliderMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement))))) {
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';
@@ -25,7 +26,56 @@ import { SliderMixin } from './vaadin-slider-mixin.js';
25
26
  * <vaadin-slider min="0" max="100" step="1"></vaadin-slider>
26
27
  * ```
27
28
  *
29
+ * ### Styling
30
+ *
31
+ * The following shadow DOM parts are available for styling:
32
+ *
33
+ * Part name | Description
34
+ * ---------------------|-----------------
35
+ * `label` | The label element
36
+ * `required-indicator` | The required indicator element
37
+ * `helper-text` | The helper text element
38
+ * `error-message` | The error message element
39
+ * `track` | The slider track
40
+ * `track-fill` | The filled portion of the track
41
+ * `thumb` | The slider thumb
42
+ *
43
+ * The following state attributes are available for styling:
44
+ *
45
+ * Attribute | Description
46
+ * -------------|-------------
47
+ * `active` | Set when the slider is activated with mouse or touch
48
+ * `disabled` | Set when the slider is disabled
49
+ * `readonly` | Set when the slider is read-only
50
+ * `focused` | Set when the slider has focus
51
+ * `focus-ring` | Set when the slider is focused using the keyboard
52
+ *
53
+ * The following custom CSS properties are available for styling:
54
+ *
55
+ * Custom CSS property |
56
+ * :--------------------------------------------|
57
+ * `--vaadin-field-default-width` |
58
+ * `--vaadin-input-field-error-color` |
59
+ * `--vaadin-input-field-error-font-size` |
60
+ * `--vaadin-input-field-error-font-weight` |
61
+ * `--vaadin-input-field-helper-color` |
62
+ * `--vaadin-input-field-helper-font-size` |
63
+ * `--vaadin-input-field-helper-font-weight` |
64
+ * `--vaadin-input-field-label-color` |
65
+ * `--vaadin-input-field-label-font-size` |
66
+ * `--vaadin-input-field-label-font-weight` |
67
+ * `--vaadin-input-field-required-indicator` |
68
+ * `--vaadin-slider-fill-background` |
69
+ * `--vaadin-slider-thumb-height` |
70
+ * `--vaadin-slider-thumb-width` |
71
+ * `--vaadin-slider-track-background` |
72
+ * `--vaadin-slider-track-border-radius` |
73
+ * `--vaadin-slider-track-height` |
74
+ *
75
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
76
+ *
28
77
  * @fires {Event} change - Fired when the user commits a value change.
78
+ * @fires {Event} input - Fired when the slider value changes during user interaction.
29
79
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
30
80
  *
31
81
  * @customElement
@@ -100,9 +150,9 @@ class Slider extends FieldMixin(
100
150
 
101
151
  return html`
102
152
  <div class="vaadin-slider-container">
103
- <div part="label" @click="${this.focus}">
153
+ <div part="label">
104
154
  <slot name="label"></slot>
105
- <span part="required-indicator" aria-hidden="true"></span>
155
+ <span part="required-indicator" aria-hidden="true" @click="${this.focus}"></span>
106
156
  </div>
107
157
 
108
158
  <div id="controls" style="${styleMap({ '--value': percent })}">
@@ -129,15 +179,36 @@ class Slider extends FieldMixin(
129
179
 
130
180
  this.__value = [this.value];
131
181
  this.__inputId = `slider-${generateUniqueId()}`;
182
+
183
+ this.addEventListener('pointerup', (e) => this.__onPointerUp(e));
184
+ this.addEventListener('pointercancel', (e) => this.__onPointerUp(e));
132
185
  }
133
186
 
134
187
  /** @protected */
135
- firstUpdated() {
136
- super.firstUpdated();
188
+ ready() {
189
+ super.ready();
137
190
 
138
191
  const input = this.querySelector('[slot="input"]');
139
192
  this._inputElement = input;
140
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
+ }
141
212
  }
142
213
 
143
214
  /**
@@ -219,7 +290,9 @@ class Slider extends FieldMixin(
219
290
 
220
291
  /** @private */
221
292
  __onInput(event) {
293
+ event.stopPropagation();
222
294
  this.__updateValue(event.target.value, 0);
295
+ this.__dispatchInputEvent();
223
296
  this.__commitValue();
224
297
  }
225
298
 
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-alpha4",
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```",
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",
@@ -331,6 +331,10 @@
331
331
  "name": "change",
332
332
  "description": "Fired when the user commits a value change."
333
333
  },
334
+ {
335
+ "name": "input",
336
+ "description": "Fired when the slider value changes during user interaction."
337
+ },
334
338
  {
335
339
  "name": "value-changed",
336
340
  "description": "Fired when the `value` property changes."
@@ -344,7 +348,7 @@
344
348
  },
345
349
  {
346
350
  "name": "vaadin-slider",
347
- "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```",
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.",
348
352
  "attributes": [
349
353
  {
350
354
  "name": "label",
@@ -678,6 +682,10 @@
678
682
  "name": "change",
679
683
  "description": "Fired when the user commits a value change."
680
684
  },
685
+ {
686
+ "name": "input",
687
+ "description": "Fired when the slider value changes during user interaction."
688
+ },
681
689
  {
682
690
  "name": "value-changed",
683
691
  "description": "Fired when the `value` property changes."
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-alpha4",
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```",
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
  {
@@ -131,6 +131,13 @@
131
131
  "kind": "expression"
132
132
  }
133
133
  },
134
+ {
135
+ "name": "@input",
136
+ "description": "Fired when the slider value changes during user interaction.",
137
+ "value": {
138
+ "kind": "expression"
139
+ }
140
+ },
134
141
  {
135
142
  "name": "@value-changed",
136
143
  "description": "Fired when the `value` property changes.",
@@ -149,7 +156,7 @@
149
156
  },
150
157
  {
151
158
  "name": "vaadin-slider",
152
- "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```",
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.",
153
160
  "extension": true,
154
161
  "attributes": [
155
162
  {
@@ -264,6 +271,13 @@
264
271
  "kind": "expression"
265
272
  }
266
273
  },
274
+ {
275
+ "name": "@input",
276
+ "description": "Fired when the slider value changes during user interaction.",
277
+ "value": {
278
+ "kind": "expression"
279
+ }
280
+ },
267
281
  {
268
282
  "name": "@value-changed",
269
283
  "description": "Fired when the `value` property changes.",