@stanko/ctrls 0.1.5 → 0.1.6
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/dist/ctrls/ctrl-dual-range.js +18 -20
- package/dist/ctrls/ctrl-range.js +1 -0
- package/dist/ctrls.css +2 -5
- package/dist/ctrls.css.map +1 -1
- package/package.json +1 -1
|
@@ -28,41 +28,38 @@ export class DualRangeCtrl {
|
|
|
28
28
|
};
|
|
29
29
|
this.buildUI = () => {
|
|
30
30
|
const { min, max, step, value } = this;
|
|
31
|
-
const
|
|
32
|
-
minInput.setAttribute("type", "range");
|
|
33
|
-
minInput.setAttribute("min", min.toString());
|
|
34
|
-
minInput.setAttribute("max", max.toString());
|
|
35
|
-
minInput.setAttribute("step", step.toString());
|
|
36
|
-
minInput.setAttribute("value", value.min.toString());
|
|
37
|
-
minInput.addEventListener("input", () => {
|
|
31
|
+
const changeHandler = () => {
|
|
38
32
|
this.value = {
|
|
39
33
|
min: parseFloat(minInput.value),
|
|
40
34
|
max: parseFloat(maxInput.value),
|
|
41
35
|
};
|
|
42
|
-
this.
|
|
43
|
-
|
|
44
|
-
|
|
36
|
+
this.update(this.value);
|
|
37
|
+
this.onChange(this.name, this.value);
|
|
38
|
+
};
|
|
39
|
+
const inputHandler = () => {
|
|
45
40
|
this.value = {
|
|
46
41
|
min: parseFloat(minInput.value),
|
|
47
42
|
max: parseFloat(maxInput.value),
|
|
48
43
|
};
|
|
49
44
|
this.update(this.value);
|
|
50
|
-
this.
|
|
51
|
-
}
|
|
45
|
+
this.onInput(this.name, this.value);
|
|
46
|
+
};
|
|
47
|
+
const minInput = document.createElement("input");
|
|
48
|
+
minInput.setAttribute("type", "range");
|
|
49
|
+
minInput.setAttribute("min", min.toString());
|
|
50
|
+
minInput.setAttribute("max", max.toString());
|
|
51
|
+
minInput.setAttribute("step", step.toString());
|
|
52
|
+
minInput.setAttribute("value", value.min.toString());
|
|
53
|
+
minInput.addEventListener("input", inputHandler);
|
|
54
|
+
minInput.addEventListener("change", changeHandler);
|
|
52
55
|
const maxInput = document.createElement("input");
|
|
53
56
|
maxInput.setAttribute("type", "range");
|
|
54
57
|
maxInput.setAttribute("min", min.toString());
|
|
55
58
|
maxInput.setAttribute("max", max.toString());
|
|
56
59
|
maxInput.setAttribute("step", step.toString());
|
|
57
60
|
maxInput.setAttribute("value", value.max.toString());
|
|
58
|
-
maxInput.addEventListener("
|
|
59
|
-
|
|
60
|
-
min: parseFloat(minInput.value),
|
|
61
|
-
max: parseFloat(maxInput.value),
|
|
62
|
-
};
|
|
63
|
-
this.update(this.value);
|
|
64
|
-
this.onChange(this.name, this.value);
|
|
65
|
-
});
|
|
61
|
+
maxInput.addEventListener("input", inputHandler);
|
|
62
|
+
maxInput.addEventListener("change", changeHandler);
|
|
66
63
|
const inputWrapper = document.createElement("div");
|
|
67
64
|
inputWrapper.classList.add("dual-range-input");
|
|
68
65
|
inputWrapper.appendChild(minInput);
|
|
@@ -115,5 +112,6 @@ export class DualRangeCtrl {
|
|
|
115
112
|
this.element = element;
|
|
116
113
|
this.valueSpan = valueSpan;
|
|
117
114
|
this.dualRange = new DualRangeInput(this.minInput, this.maxInput);
|
|
115
|
+
this.update(this.value);
|
|
118
116
|
}
|
|
119
117
|
}
|
package/dist/ctrls/ctrl-range.js
CHANGED
|
@@ -28,6 +28,7 @@ export class RangeCtrl {
|
|
|
28
28
|
input.setAttribute("value", value.toString());
|
|
29
29
|
input.addEventListener("input", () => {
|
|
30
30
|
this.value = this.parse(input.value);
|
|
31
|
+
this.update(this.value);
|
|
31
32
|
this.onInput(this.name, this.value);
|
|
32
33
|
});
|
|
33
34
|
input.addEventListener("change", () => {
|
package/dist/ctrls.css
CHANGED
|
@@ -304,9 +304,10 @@
|
|
|
304
304
|
.ctrls__title {
|
|
305
305
|
background: none;
|
|
306
306
|
border: none;
|
|
307
|
+
display: block;
|
|
308
|
+
width: 100%;
|
|
307
309
|
font-weight: bold;
|
|
308
310
|
letter-spacing: -0.025em;
|
|
309
|
-
width: 100%;
|
|
310
311
|
padding: 0.375rem 0.5rem;
|
|
311
312
|
cursor: pointer;
|
|
312
313
|
transition: color 300ms, background-color 300ms;
|
|
@@ -325,10 +326,6 @@
|
|
|
325
326
|
scrollbar-color: var(--ctrls-scrollbar-thumb-bg) transparent;
|
|
326
327
|
}
|
|
327
328
|
|
|
328
|
-
.ctrls__title + .ctrls__controls {
|
|
329
|
-
border-top: 1px solid var(--ctrls-border);
|
|
330
|
-
}
|
|
331
|
-
|
|
332
329
|
.ctrls--hidden .ctrls__controls {
|
|
333
330
|
display: none;
|
|
334
331
|
}
|
package/dist/ctrls.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../node_modules/@stanko/dual-range-input/dist/index.css","../src/scss/_ctrls.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;;AC3IF;EACE;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EACA;EAEA;EACA;EAGA;EAGA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAGA;EACA;EAEA;EAEA;EACA;EAEA;EAGA;EAEA;EACA;;;AA+CF;EACE;IA3CA;IAEA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IAGA;IAGA;IACA;IACA;IAGA;IACA;IAGA;IAGA;IAEA;IAGA;IAGA;AAAA;AAAA;;;AAWF;EAhDE;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EAGA;EAGA;AAAA;AAAA;;;AAiBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../node_modules/@stanko/dual-range-input/dist/index.css","../src/scss/_ctrls.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;;AC3IF;EACE;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EACA;EAEA;EACA;EAGA;EAGA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAGA;EACA;EAEA;EAEA;EACA;EAEA;EAGA;EAEA;EACA;;;AA+CF;EACE;IA3CA;IAEA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IAGA;IAGA;IACA;IACA;IAGA;IACA;IAGA;IAGA;IAEA;IAGA;IAGA;AAAA;AAAA;;;AAWF;EAhDE;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EAGA;EAGA;AAAA;AAAA;;;AAiBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;;AAGF;EACE;EACA;EACA,YACE;;AAIJ;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;;;AAOA;EACE;;AAGF;AAAA;AAAA;EAEE;;;AAKN;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAKA;AAAA;EACE;EACA;EACA;;;AAIJ;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAIF;EACE;;;AAIF;EACE;;;AAIF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAmCJ;EA5BE;EACA;EACA;EACA;EACA;EAEA;;;AA0BF;EAhCE;EACA;EACA;EACA;EACA;EAEA;;;AA8BF;EAtBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAkBA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EAvDE;EACA;EACA;EACA;EACA;EAEA;;;AAqDF;EA7CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAwCA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EAGE;;AAEA;EACE;;AANJ;EASE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;;AAIJ;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAEF;EACA;EACA;;AAEA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;AAIE;EACE;;;AAKN;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAEA;EACE;EACA","file":"ctrls.css"}
|