@vaadin/slider 25.1.0-alpha4 → 25.1.0-alpha5

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 +74 -0
  3. package/src/vaadin-range-slider.js +58 -0
  4. package/src/vaadin-slider-mixin.js +11 -0
  5. package/src/vaadin-slider.d.ts +70 -0
  6. package/src/vaadin-slider.js +50 -0
  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-alpha5",
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-alpha5",
38
+ "@vaadin/component-base": "25.1.0-alpha5",
39
+ "@vaadin/field-base": "25.1.0-alpha5",
40
+ "@vaadin/vaadin-themable-mixin": "25.1.0-alpha5",
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-alpha5",
45
+ "@vaadin/test-runner-commands": "25.1.0-alpha5",
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-alpha5"
48
48
  },
49
49
  "web-types": [
50
50
  "web-types.json",
51
51
  "web-types.lit.json"
52
52
  ],
53
- "gitHead": "4fb917150617231c1acf27faabf386560dcd3bc5"
53
+ "gitHead": "9681e63d220c9e8d9d7c58cee272e5820b8ced19"
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,59 @@ 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-focused` | Set when the start thumb has focus
87
+ * `end-focused` | Set when the end thumb has focus
88
+ *
89
+ * The following custom CSS properties are available for styling:
90
+ *
91
+ * Custom CSS property |
92
+ * :--------------------------------------------|
93
+ * `--vaadin-field-default-width` |
94
+ * `--vaadin-input-field-error-color` |
95
+ * `--vaadin-input-field-error-font-size` |
96
+ * `--vaadin-input-field-error-font-weight` |
97
+ * `--vaadin-input-field-helper-color` |
98
+ * `--vaadin-input-field-helper-font-size` |
99
+ * `--vaadin-input-field-helper-font-weight` |
100
+ * `--vaadin-input-field-label-color` |
101
+ * `--vaadin-input-field-label-font-size` |
102
+ * `--vaadin-input-field-label-font-weight` |
103
+ * `--vaadin-input-field-required-indicator` |
104
+ * `--vaadin-slider-fill-background` |
105
+ * `--vaadin-slider-thumb-height` |
106
+ * `--vaadin-slider-thumb-width` |
107
+ * `--vaadin-slider-track-background` |
108
+ * `--vaadin-slider-track-border-radius` |
109
+ * `--vaadin-slider-track-height` |
110
+ *
111
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
112
+ *
40
113
  * @fires {Event} change - Fired when the user commits a value change.
114
+ * @fires {Event} input - Fired when the slider value changes during user interaction.
41
115
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
42
116
  */
43
117
  declare class RangeSlider extends FieldMixin(SliderMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement))))) {
package/src/vaadin-range-slider.js CHANGED
@@ -26,7 +26,59 @@ 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-focused` | Set when the start thumb has focus
54
+ * `end-focused` | Set when the end thumb has focus
55
+ *
56
+ * The following custom CSS properties are available for styling:
57
+ *
58
+ * Custom CSS property |
59
+ * :--------------------------------------------|
60
+ * `--vaadin-field-default-width` |
61
+ * `--vaadin-input-field-error-color` |
62
+ * `--vaadin-input-field-error-font-size` |
63
+ * `--vaadin-input-field-error-font-weight` |
64
+ * `--vaadin-input-field-helper-color` |
65
+ * `--vaadin-input-field-helper-font-size` |
66
+ * `--vaadin-input-field-helper-font-weight` |
67
+ * `--vaadin-input-field-label-color` |
68
+ * `--vaadin-input-field-label-font-size` |
69
+ * `--vaadin-input-field-label-font-weight` |
70
+ * `--vaadin-input-field-required-indicator` |
71
+ * `--vaadin-slider-fill-background` |
72
+ * `--vaadin-slider-thumb-height` |
73
+ * `--vaadin-slider-thumb-width` |
74
+ * `--vaadin-slider-track-background` |
75
+ * `--vaadin-slider-track-border-radius` |
76
+ * `--vaadin-slider-track-height` |
77
+ *
78
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
79
+ *
29
80
  * @fires {Event} change - Fired when the user commits a value change.
81
+ * @fires {Event} input - Fired when the slider value changes during user interaction.
30
82
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
31
83
  *
32
84
  * @customElement
@@ -294,6 +346,8 @@ class RangeSlider extends FieldMixin(
294
346
 
295
347
  /** @private */
296
348
  __onStartInput(event) {
349
+ event.stopPropagation();
350
+
297
351
  // Use second input value as first input max limit
298
352
  if (parseFloat(event.target.value) > this.__value[1]) {
299
353
  event.target.value = this.__value[1];
@@ -301,11 +355,14 @@ class RangeSlider extends FieldMixin(
301
355
 
302
356
  const value = event.target.value;
303
357
  this.__updateValue(value, 0);
358
+ this.__dispatchInputEvent();
304
359
  this.__commitValue();
305
360
  }
306
361
 
307
362
  /** @private */
308
363
  __onEndInput(event) {
364
+ event.stopPropagation();
365
+
309
366
  // Use first input value as second input min limit
310
367
  if (parseFloat(event.target.value) < this.__value[0]) {
311
368
  event.target.value = this.__value[0];
@@ -313,6 +370,7 @@ class RangeSlider extends FieldMixin(
313
370
 
314
371
  const value = event.target.value;
315
372
  this.__updateValue(value, 1);
373
+ this.__dispatchInputEvent();
316
374
  this.__commitValue();
317
375
  }
318
376
 
package/src/vaadin-slider-mixin.js CHANGED
@@ -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,55 @@ 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
+ * `disabled` | Set when the slider is disabled
81
+ * `readonly` | Set when the slider is read-only
82
+ * `focused` | Set when the slider has focus
83
+ * `focus-ring` | Set when the slider is focused using the keyboard
84
+ *
85
+ * The following custom CSS properties are available for styling:
86
+ *
87
+ * Custom CSS property |
88
+ * :--------------------------------------------|
89
+ * `--vaadin-field-default-width` |
90
+ * `--vaadin-input-field-error-color` |
91
+ * `--vaadin-input-field-error-font-size` |
92
+ * `--vaadin-input-field-error-font-weight` |
93
+ * `--vaadin-input-field-helper-color` |
94
+ * `--vaadin-input-field-helper-font-size` |
95
+ * `--vaadin-input-field-helper-font-weight` |
96
+ * `--vaadin-input-field-label-color` |
97
+ * `--vaadin-input-field-label-font-size` |
98
+ * `--vaadin-input-field-label-font-weight` |
99
+ * `--vaadin-input-field-required-indicator` |
100
+ * `--vaadin-slider-fill-background` |
101
+ * `--vaadin-slider-thumb-height` |
102
+ * `--vaadin-slider-thumb-width` |
103
+ * `--vaadin-slider-track-background` |
104
+ * `--vaadin-slider-track-border-radius` |
105
+ * `--vaadin-slider-track-height` |
106
+ *
107
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
108
+ *
40
109
  * @fires {Event} change - Fired when the user commits a value change.
110
+ * @fires {Event} input - Fired when the slider value changes during user interaction.
41
111
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
42
112
  */
43
113
  declare class Slider extends FieldMixin(SliderMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement))))) {
package/src/vaadin-slider.js CHANGED
@@ -25,7 +25,55 @@ import { SliderMixin } from './vaadin-slider-mixin.js';
25
25
  * <vaadin-slider min="0" max="100" step="1"></vaadin-slider>
26
26
  * ```
27
27
  *
28
+ * ### Styling
29
+ *
30
+ * The following shadow DOM parts are available for styling:
31
+ *
32
+ * Part name | Description
33
+ * ---------------------|-----------------
34
+ * `label` | The label element
35
+ * `required-indicator` | The required indicator element
36
+ * `helper-text` | The helper text element
37
+ * `error-message` | The error message element
38
+ * `track` | The slider track
39
+ * `track-fill` | The filled portion of the track
40
+ * `thumb` | The slider thumb
41
+ *
42
+ * The following state attributes are available for styling:
43
+ *
44
+ * Attribute | Description
45
+ * -------------|-------------
46
+ * `disabled` | Set when the slider is disabled
47
+ * `readonly` | Set when the slider is read-only
48
+ * `focused` | Set when the slider has focus
49
+ * `focus-ring` | Set when the slider is focused using the keyboard
50
+ *
51
+ * The following custom CSS properties are available for styling:
52
+ *
53
+ * Custom CSS property |
54
+ * :--------------------------------------------|
55
+ * `--vaadin-field-default-width` |
56
+ * `--vaadin-input-field-error-color` |
57
+ * `--vaadin-input-field-error-font-size` |
58
+ * `--vaadin-input-field-error-font-weight` |
59
+ * `--vaadin-input-field-helper-color` |
60
+ * `--vaadin-input-field-helper-font-size` |
61
+ * `--vaadin-input-field-helper-font-weight` |
62
+ * `--vaadin-input-field-label-color` |
63
+ * `--vaadin-input-field-label-font-size` |
64
+ * `--vaadin-input-field-label-font-weight` |
65
+ * `--vaadin-input-field-required-indicator` |
66
+ * `--vaadin-slider-fill-background` |
67
+ * `--vaadin-slider-thumb-height` |
68
+ * `--vaadin-slider-thumb-width` |
69
+ * `--vaadin-slider-track-background` |
70
+ * `--vaadin-slider-track-border-radius` |
71
+ * `--vaadin-slider-track-height` |
72
+ *
73
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
74
+ *
28
75
  * @fires {Event} change - Fired when the user commits a value change.
76
+ * @fires {Event} input - Fired when the slider value changes during user interaction.
29
77
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
30
78
  *
31
79
  * @customElement
@@ -219,7 +267,9 @@ class Slider extends FieldMixin(
219
267
 
220
268
  /** @private */
221
269
  __onInput(event) {
270
+ event.stopPropagation();
222
271
  this.__updateValue(event.target.value, 0);
272
+ this.__dispatchInputEvent();
223
273
  this.__commitValue();
224
274
  }
225
275
 
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-alpha5",
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-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`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-alpha5",
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-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`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.",