perfect-gui 5.1.1 → 5.1.2
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 +1 -1
- package/src/components/Slider.js +10 -4
- package/src/styles/_slider.css +3 -0
package/package.json
CHANGED
package/src/components/Slider.js
CHANGED
|
@@ -91,17 +91,18 @@ export default class Slider {
|
|
|
91
91
|
|
|
92
92
|
// init position
|
|
93
93
|
setTimeout(() => {
|
|
94
|
+
const sliderWidth = this.ctrlDiv.offsetWidth;
|
|
94
95
|
const handleWidth = this.handle.offsetWidth;
|
|
95
96
|
this.handle.position = this._mapLinear(
|
|
96
97
|
this.valueInput.value,
|
|
97
98
|
this.min,
|
|
98
99
|
this.max,
|
|
99
100
|
handleWidth / 2,
|
|
100
|
-
|
|
101
|
+
sliderWidth - handleWidth / 2,
|
|
101
102
|
);
|
|
102
103
|
this.handle.position = Math.min(
|
|
103
104
|
this.handle.position,
|
|
104
|
-
|
|
105
|
+
sliderWidth - handleWidth / 2,
|
|
105
106
|
);
|
|
106
107
|
this.handle.position = Math.max(
|
|
107
108
|
this.handle.position,
|
|
@@ -126,6 +127,10 @@ export default class Slider {
|
|
|
126
127
|
this.ctrlDiv.pointerDown = false;
|
|
127
128
|
});
|
|
128
129
|
|
|
130
|
+
window.addEventListener('pointercancel', (evt) => {
|
|
131
|
+
this.ctrlDiv.pointerDown = false;
|
|
132
|
+
});
|
|
133
|
+
|
|
129
134
|
window.addEventListener('pointermove', (evt) => {
|
|
130
135
|
if (this.ctrlDiv.pointerDown) {
|
|
131
136
|
this.ctrlDiv.pointerDelta =
|
|
@@ -154,14 +159,15 @@ export default class Slider {
|
|
|
154
159
|
}
|
|
155
160
|
|
|
156
161
|
_updateHandlePositionFromPointer(evt, firstDown = false) {
|
|
157
|
-
const
|
|
162
|
+
const rect = this.ctrlDiv.getBoundingClientRect();
|
|
163
|
+
const sliderWidth = rect.width;
|
|
158
164
|
const handleWidth = this.handle.offsetWidth;
|
|
159
165
|
const pointerDelta = evt.clientX - this.ctrlDiv.prevPosition;
|
|
160
166
|
const currentValue = parseFloat(this.valueInput.value);
|
|
161
167
|
let handlePosition;
|
|
162
168
|
|
|
163
169
|
if (firstDown) {
|
|
164
|
-
handlePosition = evt.
|
|
170
|
+
handlePosition = evt.clientX - rect.left;
|
|
165
171
|
} else {
|
|
166
172
|
handlePosition = this.handle.position + pointerDelta;
|
|
167
173
|
}
|
package/src/styles/_slider.css
CHANGED
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
color: var(--color-text-dark);
|
|
9
9
|
transition: color var(--transition);
|
|
10
10
|
padding: 3px;
|
|
11
|
+
touch-action: none;
|
|
11
12
|
}
|
|
12
13
|
|
|
13
14
|
.p-gui__slider:hover {
|
|
@@ -32,6 +33,7 @@
|
|
|
32
33
|
height: 14px;
|
|
33
34
|
margin: 0 0 0 auto;
|
|
34
35
|
width: 37%;
|
|
36
|
+
touch-action: none;
|
|
35
37
|
}
|
|
36
38
|
|
|
37
39
|
.p-gui__slider-bar {
|
|
@@ -51,6 +53,7 @@
|
|
|
51
53
|
height: 100%;
|
|
52
54
|
background: var(--color-accent);
|
|
53
55
|
width: 0;
|
|
56
|
+
pointer-events: none;
|
|
54
57
|
}
|
|
55
58
|
|
|
56
59
|
.p-gui__slider:hover .p-gui__slider-filling {
|