@vaadin/slider 25.1.0-alpha3 → 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.
- package/package.json +10 -8
- package/src/styles/vaadin-slider-base-styles.js +45 -25
- package/src/vaadin-range-slider.d.ts +76 -1
- package/src/vaadin-range-slider.js +171 -77
- package/src/vaadin-slider-mixin.d.ts +2 -1
- package/src/vaadin-slider-mixin.js +47 -125
- package/src/vaadin-slider.d.ts +72 -1
- package/src/vaadin-slider.js +112 -15
- package/web-types.json +379 -3
- package/web-types.lit.json +157 -3
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-alpha5",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -34,19 +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/
|
|
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",
|
|
40
41
|
"lit": "^3.0.0"
|
|
41
42
|
},
|
|
42
43
|
"devDependencies": {
|
|
43
|
-
"@vaadin/chai-plugins": "25.1.0-
|
|
44
|
-
"@vaadin/test-runner-commands": "25.1.0-
|
|
45
|
-
"@vaadin/testing-helpers": "^2.0.0"
|
|
44
|
+
"@vaadin/chai-plugins": "25.1.0-alpha5",
|
|
45
|
+
"@vaadin/test-runner-commands": "25.1.0-alpha5",
|
|
46
|
+
"@vaadin/testing-helpers": "^2.0.0",
|
|
47
|
+
"@vaadin/vaadin-lumo-styles": "25.1.0-alpha5"
|
|
46
48
|
},
|
|
47
49
|
"web-types": [
|
|
48
50
|
"web-types.json",
|
|
49
51
|
"web-types.lit.json"
|
|
50
52
|
],
|
|
51
|
-
"gitHead": "
|
|
53
|
+
"gitHead": "9681e63d220c9e8d9d7c58cee272e5820b8ced19"
|
|
52
54
|
}
|
|
@@ -8,17 +8,11 @@ import { css } from 'lit';
|
|
|
8
8
|
|
|
9
9
|
export const sliderStyles = css`
|
|
10
10
|
:host {
|
|
11
|
-
display: inline-flex;
|
|
12
|
-
align-items: center;
|
|
13
11
|
box-sizing: border-box;
|
|
14
|
-
position: relative;
|
|
15
|
-
width: 100%;
|
|
16
|
-
height: var(--_thumb-size);
|
|
17
12
|
user-select: none;
|
|
18
13
|
-webkit-user-select: none;
|
|
19
|
-
|
|
20
|
-
--_thumb-
|
|
21
|
-
--_track-size: var(--vaadin-slider-track-size, 0.25lh);
|
|
14
|
+
--_thumb-width: var(--vaadin-slider-thumb-width, 1lh);
|
|
15
|
+
--_thumb-height: var(--vaadin-slider-thumb-height, 1lh);
|
|
22
16
|
}
|
|
23
17
|
|
|
24
18
|
:host([hidden]) {
|
|
@@ -36,32 +30,51 @@ export const sliderStyles = css`
|
|
|
36
30
|
|
|
37
31
|
:host([readonly]) {
|
|
38
32
|
--vaadin-slider-fill-background: var(--vaadin-background-color);
|
|
33
|
+
--_outline-style: dashed;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
#controls {
|
|
37
|
+
grid-area: input;
|
|
38
|
+
display: inline-grid;
|
|
39
|
+
align-items: center;
|
|
40
|
+
width: var(--vaadin-field-default-width, 12em);
|
|
41
|
+
max-width: 100%;
|
|
42
|
+
min-width: 100%;
|
|
43
|
+
min-height: var(--_thumb-height);
|
|
44
|
+
--_track-width: calc(100% - var(--_thumb-width));
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
:host([has-label]) #controls {
|
|
48
|
+
border-block: var(--vaadin-input-field-border-width, 1px) solid transparent;
|
|
49
|
+
padding-block: var(--vaadin-padding-block-container);
|
|
39
50
|
}
|
|
40
51
|
|
|
41
52
|
[part='track'] {
|
|
42
53
|
box-sizing: border-box;
|
|
43
|
-
|
|
44
|
-
|
|
54
|
+
grid-row: 1;
|
|
55
|
+
grid-column: track-start / track-end;
|
|
56
|
+
display: grid;
|
|
57
|
+
grid-template-columns: subgrid;
|
|
58
|
+
align-items: center;
|
|
45
59
|
width: 100%;
|
|
60
|
+
height: var(--vaadin-slider-track-height, 0.25lh);
|
|
46
61
|
background: var(--vaadin-slider-track-background, var(--vaadin-background-container));
|
|
47
|
-
border-radius:
|
|
62
|
+
border-radius: var(--vaadin-slider-track-border-radius, var(--vaadin-radius-m));
|
|
48
63
|
}
|
|
49
64
|
|
|
50
65
|
[part='track-fill'] {
|
|
51
66
|
box-sizing: border-box;
|
|
52
|
-
|
|
53
|
-
height:
|
|
67
|
+
grid-column: fill-start / fill-end;
|
|
68
|
+
height: 100%;
|
|
54
69
|
background: var(--vaadin-slider-fill-background, var(--vaadin-text-color));
|
|
55
|
-
border-start-start-radius: inherit;
|
|
56
|
-
border-end-start-radius: inherit;
|
|
57
70
|
}
|
|
58
71
|
|
|
59
72
|
[part~='thumb'] {
|
|
60
|
-
position: absolute;
|
|
61
73
|
box-sizing: border-box;
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
74
|
+
grid-row: 1;
|
|
75
|
+
grid-column: thumb1;
|
|
76
|
+
width: var(--_thumb-width);
|
|
77
|
+
height: var(--_thumb-height);
|
|
65
78
|
background: var(--vaadin-slider-fill-background, var(--vaadin-text-color));
|
|
66
79
|
border-radius: 50%;
|
|
67
80
|
touch-action: none;
|
|
@@ -72,13 +85,20 @@ export const sliderStyles = css`
|
|
|
72
85
|
border: dashed 1px var(--vaadin-border-color);
|
|
73
86
|
}
|
|
74
87
|
|
|
75
|
-
|
|
88
|
+
:host([readonly]) [part='track-fill'] {
|
|
89
|
+
border-inline-end: none;
|
|
90
|
+
}
|
|
91
|
+
|
|
76
92
|
::slotted(input) {
|
|
77
|
-
|
|
93
|
+
grid-row: 1;
|
|
94
|
+
grid-column: track-start / track-end;
|
|
95
|
+
appearance: none;
|
|
96
|
+
width: 100%;
|
|
97
|
+
height: 100%;
|
|
78
98
|
font: inherit;
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
99
|
+
margin: 0;
|
|
100
|
+
background: transparent;
|
|
101
|
+
outline: 0;
|
|
102
|
+
-webkit-tap-highlight-color: transparent;
|
|
83
103
|
}
|
|
84
104
|
`;
|
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
|
|
7
7
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
8
|
+
import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
|
|
8
9
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
9
10
|
import { SliderMixin } from './vaadin-slider-mixin.js';
|
|
10
11
|
|
|
@@ -15,17 +16,39 @@ export type RangeSliderChangeEvent = Event & {
|
|
|
15
16
|
target: RangeSlider;
|
|
16
17
|
};
|
|
17
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
|
+
|
|
18
31
|
/**
|
|
19
32
|
* Fired when the `value` property changes.
|
|
20
33
|
*/
|
|
21
34
|
export type RangeSliderValueChangedEvent = CustomEvent<{ value: number[] }>;
|
|
22
35
|
|
|
36
|
+
/**
|
|
37
|
+
* Fired whenever the slider is validated.
|
|
38
|
+
*/
|
|
39
|
+
export type RangeSliderValidatedEvent = CustomEvent<{ valid: boolean }>;
|
|
40
|
+
|
|
23
41
|
export interface RangeSliderCustomEventMap {
|
|
42
|
+
'invalid-changed': RangeSliderInvalidChangedEvent;
|
|
43
|
+
|
|
24
44
|
'value-changed': RangeSliderValueChangedEvent;
|
|
45
|
+
|
|
46
|
+
validated: RangeSliderValidatedEvent;
|
|
25
47
|
}
|
|
26
48
|
|
|
27
49
|
export interface RangeSliderEventMap extends HTMLElementEventMap, RangeSliderCustomEventMap {
|
|
28
50
|
change: RangeSliderChangeEvent;
|
|
51
|
+
input: RangeSliderInputEvent;
|
|
29
52
|
}
|
|
30
53
|
|
|
31
54
|
/**
|
|
@@ -36,10 +59,62 @@ export interface RangeSliderEventMap extends HTMLElementEventMap, RangeSliderCus
|
|
|
36
59
|
* <vaadin-range-slider min="0" max="100" step="1"></vaadin-range-slider>
|
|
37
60
|
* ```
|
|
38
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
|
+
*
|
|
39
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.
|
|
40
115
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
41
116
|
*/
|
|
42
|
-
declare class RangeSlider extends SliderMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
|
|
117
|
+
declare class RangeSlider extends FieldMixin(SliderMixin(FocusMixin(ThemableMixin(ElementMixin(HTMLElement))))) {
|
|
43
118
|
/**
|
|
44
119
|
* The value of the slider.
|
|
45
120
|
*/
|
|
@@ -11,6 +11,8 @@ import { defineCustomElement } from '@vaadin/component-base/src/define.js';
|
|
|
11
11
|
import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
|
|
12
12
|
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
|
|
13
13
|
import { generateUniqueId } from '@vaadin/component-base/src/unique-id-utils.js';
|
|
14
|
+
import { FieldMixin } from '@vaadin/field-base/src/field-mixin.js';
|
|
15
|
+
import { field } from '@vaadin/field-base/src/styles/field-base-styles.js';
|
|
14
16
|
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
|
|
15
17
|
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
|
|
16
18
|
import { sliderStyles } from './styles/vaadin-slider-base-styles.js';
|
|
@@ -24,18 +26,71 @@ import { SliderMixin } from './vaadin-slider-mixin.js';
|
|
|
24
26
|
* <vaadin-range-slider min="0" max="100" step="1"></vaadin-range-slider>
|
|
25
27
|
* ```
|
|
26
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
|
+
*
|
|
27
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.
|
|
28
82
|
* @fires {CustomEvent} value-changed - Fired when the `value` property changes.
|
|
29
83
|
*
|
|
30
84
|
* @customElement
|
|
31
85
|
* @extends HTMLElement
|
|
32
86
|
* @mixes ElementMixin
|
|
87
|
+
* @mixes FieldMixin
|
|
33
88
|
* @mixes FocusMixin
|
|
34
89
|
* @mixes SliderMixin
|
|
35
90
|
* @mixes ThemableMixin
|
|
36
91
|
*/
|
|
37
|
-
class RangeSlider extends
|
|
38
|
-
FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement))))),
|
|
92
|
+
class RangeSlider extends FieldMixin(
|
|
93
|
+
SliderMixin(FocusMixin(ElementMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))))),
|
|
39
94
|
) {
|
|
40
95
|
static get is() {
|
|
41
96
|
return 'vaadin-range-slider';
|
|
@@ -43,6 +98,7 @@ class RangeSlider extends SliderMixin(
|
|
|
43
98
|
|
|
44
99
|
static get styles() {
|
|
45
100
|
return [
|
|
101
|
+
field,
|
|
46
102
|
sliderStyles,
|
|
47
103
|
css`
|
|
48
104
|
:host([focus-ring][start-focused]) [part~='thumb-start'],
|
|
@@ -51,8 +107,56 @@ class RangeSlider extends SliderMixin(
|
|
|
51
107
|
outline-offset: 1px;
|
|
52
108
|
}
|
|
53
109
|
|
|
54
|
-
|
|
55
|
-
|
|
110
|
+
#controls {
|
|
111
|
+
grid-template-columns:
|
|
112
|
+
[track-start]
|
|
113
|
+
calc(var(--start-value) * var(--_track-width))
|
|
114
|
+
[thumb1]
|
|
115
|
+
0
|
|
116
|
+
[fill-start]
|
|
117
|
+
calc((var(--end-value) - var(--start-value)) * var(--_track-width))
|
|
118
|
+
[fill-end thumb2]
|
|
119
|
+
0
|
|
120
|
+
calc((1 - var(--end-value)) * var(--_track-width))
|
|
121
|
+
var(--_thumb-width)
|
|
122
|
+
[track-end];
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
[part='track-fill'] {
|
|
126
|
+
margin-inline-start: var(--_thumb-width);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
[part~='thumb-end'] {
|
|
130
|
+
grid-column: thumb2;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
:host([readonly]) [part='track-fill'] {
|
|
134
|
+
border-inline-start: none;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
::slotted(input:last-of-type) {
|
|
138
|
+
clip-path: inset(
|
|
139
|
+
0 0 0
|
|
140
|
+
clamp(
|
|
141
|
+
0%,
|
|
142
|
+
var(--_thumb-width) / 2 + var(--start-value) * var(--_track-width) +
|
|
143
|
+
(var(--end-value) - var(--start-value)) * var(--_track-width) / 2,
|
|
144
|
+
100%
|
|
145
|
+
)
|
|
146
|
+
);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
:host([dir='rtl']) ::slotted(input:last-of-type) {
|
|
150
|
+
clip-path: inset(
|
|
151
|
+
0
|
|
152
|
+
clamp(
|
|
153
|
+
0%,
|
|
154
|
+
var(--_thumb-width) / 2 + var(--start-value) * var(--_track-width) +
|
|
155
|
+
(var(--end-value) - var(--start-value)) * var(--_track-width) / 2,
|
|
156
|
+
100%
|
|
157
|
+
)
|
|
158
|
+
0 0
|
|
159
|
+
);
|
|
56
160
|
}
|
|
57
161
|
`,
|
|
58
162
|
];
|
|
@@ -62,6 +166,10 @@ class RangeSlider extends SliderMixin(
|
|
|
62
166
|
return 'sliderComponent';
|
|
63
167
|
}
|
|
64
168
|
|
|
169
|
+
static get lumoInjector() {
|
|
170
|
+
return { ...super.lumoInjector, includeBaseStyles: true };
|
|
171
|
+
}
|
|
172
|
+
|
|
65
173
|
static get properties() {
|
|
66
174
|
return {
|
|
67
175
|
/**
|
|
@@ -84,18 +192,29 @@ class RangeSlider extends SliderMixin(
|
|
|
84
192
|
const endPercent = this.__getPercentFromValue(endValue);
|
|
85
193
|
|
|
86
194
|
return html`
|
|
87
|
-
<div
|
|
88
|
-
<div
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
195
|
+
<div class="vaadin-slider-container">
|
|
196
|
+
<div part="label" @click="${this.focus}">
|
|
197
|
+
<slot name="label"></slot>
|
|
198
|
+
<span part="required-indicator" aria-hidden="true"></span>
|
|
199
|
+
</div>
|
|
200
|
+
|
|
201
|
+
<div id="controls" style="${styleMap({ '--start-value': startPercent, '--end-value': endPercent })}">
|
|
202
|
+
<div part="track">
|
|
203
|
+
<div part="track-fill"></div>
|
|
204
|
+
</div>
|
|
205
|
+
<div part="thumb thumb-start"></div>
|
|
206
|
+
<div part="thumb thumb-end"></div>
|
|
207
|
+
<slot name="input"></slot>
|
|
208
|
+
</div>
|
|
209
|
+
|
|
210
|
+
<div part="helper-text">
|
|
211
|
+
<slot name="helper"></slot>
|
|
212
|
+
</div>
|
|
213
|
+
|
|
214
|
+
<div part="error-message">
|
|
215
|
+
<slot name="error-message"></slot>
|
|
216
|
+
</div>
|
|
95
217
|
</div>
|
|
96
|
-
<div part="thumb thumb-start" style="${styleMap({ insetInlineStart: `${startPercent}%` })}"></div>
|
|
97
|
-
<div part="thumb thumb-end" style="${styleMap({ insetInlineStart: `${endPercent}%` })}"></div>
|
|
98
|
-
<slot name="input"></slot>
|
|
99
218
|
`;
|
|
100
219
|
}
|
|
101
220
|
|
|
@@ -113,6 +232,7 @@ class RangeSlider extends SliderMixin(
|
|
|
113
232
|
|
|
114
233
|
const inputs = this.querySelectorAll('[slot="input"]');
|
|
115
234
|
this._inputElements = [...inputs];
|
|
235
|
+
this.ariaTarget = this;
|
|
116
236
|
}
|
|
117
237
|
|
|
118
238
|
/**
|
|
@@ -139,7 +259,7 @@ class RangeSlider extends SliderMixin(
|
|
|
139
259
|
.disabled="${this.disabled}"
|
|
140
260
|
tabindex="${this.disabled ? -1 : 0}"
|
|
141
261
|
@keydown="${this.__onKeyDown}"
|
|
142
|
-
@input="${this.
|
|
262
|
+
@input="${this.__onStartInput}"
|
|
143
263
|
@change="${this.__onChange}"
|
|
144
264
|
/>
|
|
145
265
|
<input
|
|
@@ -153,7 +273,7 @@ class RangeSlider extends SliderMixin(
|
|
|
153
273
|
.disabled="${this.disabled}"
|
|
154
274
|
tabindex="${this.disabled ? -1 : 0}"
|
|
155
275
|
@keydown="${this.__onKeyDown}"
|
|
156
|
-
@input="${this.
|
|
276
|
+
@input="${this.__onEndInput}"
|
|
157
277
|
@change="${this.__onChange}"
|
|
158
278
|
/>
|
|
159
279
|
`,
|
|
@@ -191,6 +311,19 @@ class RangeSlider extends SliderMixin(
|
|
|
191
311
|
super.focus(options);
|
|
192
312
|
}
|
|
193
313
|
|
|
314
|
+
/**
|
|
315
|
+
* @protected
|
|
316
|
+
* @override
|
|
317
|
+
*/
|
|
318
|
+
blur() {
|
|
319
|
+
if (this._inputElements) {
|
|
320
|
+
const focusedInput = this._inputElements.find((input) => isElementFocused(input));
|
|
321
|
+
if (focusedInput) {
|
|
322
|
+
focusedInput.blur();
|
|
323
|
+
}
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
|
|
194
327
|
/**
|
|
195
328
|
* Override method inherited from `FocusMixin` to set
|
|
196
329
|
* state attributes indicating which thumb has focus.
|
|
@@ -206,78 +339,39 @@ class RangeSlider extends SliderMixin(
|
|
|
206
339
|
this.toggleAttribute('end-focused', isElementFocused(this._inputElements[1]));
|
|
207
340
|
}
|
|
208
341
|
|
|
209
|
-
/**
|
|
210
|
-
* @param {PointerEvent} event
|
|
211
|
-
* @private
|
|
212
|
-
*/
|
|
213
|
-
__focusInput(event) {
|
|
214
|
-
const index = this.__getThumbIndex(event);
|
|
215
|
-
this._inputElements[index].focus();
|
|
216
|
-
}
|
|
217
|
-
|
|
218
342
|
/** @private */
|
|
219
343
|
__commitValue() {
|
|
220
344
|
this.value = [...this.__value];
|
|
221
345
|
}
|
|
222
346
|
|
|
223
|
-
/**
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
if (event.
|
|
229
|
-
|
|
347
|
+
/** @private */
|
|
348
|
+
__onStartInput(event) {
|
|
349
|
+
event.stopPropagation();
|
|
350
|
+
|
|
351
|
+
// Use second input value as first input max limit
|
|
352
|
+
if (parseFloat(event.target.value) > this.__value[1]) {
|
|
353
|
+
event.target.value = this.__value[1];
|
|
230
354
|
}
|
|
231
355
|
|
|
232
|
-
|
|
356
|
+
const value = event.target.value;
|
|
357
|
+
this.__updateValue(value, 0);
|
|
358
|
+
this.__dispatchInputEvent();
|
|
359
|
+
this.__commitValue();
|
|
233
360
|
}
|
|
234
361
|
|
|
235
|
-
/**
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
* @private
|
|
239
|
-
*/
|
|
240
|
-
__getClosestThumb(event) {
|
|
241
|
-
let closestThumb;
|
|
242
|
-
|
|
243
|
-
// If both thumbs are at the start, use the second thumb,
|
|
244
|
-
// and if both are at tne end, use the first one instead.
|
|
245
|
-
if (this.__value[0] === this.__value[1]) {
|
|
246
|
-
const { min, max } = this.__getConstraints();
|
|
247
|
-
if (this.__value[0] === min) {
|
|
248
|
-
return 1;
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
if (this.__value[0] === max) {
|
|
252
|
-
return 0;
|
|
253
|
-
}
|
|
254
|
-
}
|
|
362
|
+
/** @private */
|
|
363
|
+
__onEndInput(event) {
|
|
364
|
+
event.stopPropagation();
|
|
255
365
|
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
// First thumb position from the "end"
|
|
260
|
-
const index = this.__value.findIndex((v) => value - v < 0);
|
|
261
|
-
|
|
262
|
-
// Pick the first one
|
|
263
|
-
if (index === 0) {
|
|
264
|
-
closestThumb = index;
|
|
265
|
-
} else if (index === -1) {
|
|
266
|
-
// Pick the last one (position is past all the thumbs)
|
|
267
|
-
closestThumb = this.__value.length - 1;
|
|
268
|
-
} else {
|
|
269
|
-
const lastStart = this.__value[index - 1];
|
|
270
|
-
const firstEnd = this.__value[index];
|
|
271
|
-
// Pick the first one from the "start" unless thumbs are stacked on top of each other
|
|
272
|
-
if (Math.abs(lastStart - value) < Math.abs(firstEnd - value)) {
|
|
273
|
-
closestThumb = index - 1;
|
|
274
|
-
} else {
|
|
275
|
-
// Pick the last one from the "end"
|
|
276
|
-
closestThumb = index;
|
|
277
|
-
}
|
|
366
|
+
// Use first input value as second input min limit
|
|
367
|
+
if (parseFloat(event.target.value) < this.__value[0]) {
|
|
368
|
+
event.target.value = this.__value[0];
|
|
278
369
|
}
|
|
279
370
|
|
|
280
|
-
|
|
371
|
+
const value = event.target.value;
|
|
372
|
+
this.__updateValue(value, 1);
|
|
373
|
+
this.__dispatchInputEvent();
|
|
374
|
+
this.__commitValue();
|
|
281
375
|
}
|
|
282
376
|
|
|
283
377
|
/** @private */
|
|
@@ -5,10 +5,11 @@
|
|
|
5
5
|
*/
|
|
6
6
|
import type { Constructor } from '@open-wc/dedupe-mixin';
|
|
7
7
|
import type { DisabledMixinClass } from '@vaadin/a11y-base/src/disabled-mixin.js';
|
|
8
|
+
import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js';
|
|
8
9
|
|
|
9
10
|
export declare function SliderMixin<T extends Constructor<HTMLElement>>(
|
|
10
11
|
base: T,
|
|
11
|
-
): Constructor<DisabledMixinClass> & Constructor<SliderMixinClass> & T;
|
|
12
|
+
): Constructor<DisabledMixinClass> & Constructor<SliderMixinClass> & Constructor<SlotStylesMixinClass> & T;
|
|
12
13
|
|
|
13
14
|
export declare class SliderMixinClass {
|
|
14
15
|
/**
|