Skip to content

Commit 0429b12

Browse files
7evenk7evenk
committed
Assign slider properties from host
1 parent 8812847 commit 0429b12

File tree

2 files changed

+112
-55
lines changed

2 files changed

+112
-55
lines changed

‎sample/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
</script>
1919
</head>
2020
<body>
21-
<node-projects-slider style="position: absolute; width: 500px; height: 300px;" value-min="200"; value-max="9999">
21+
<node-projects-slider style="position: absolute; width: 500px; height: 300px;" value-min="1234"; value-max="88888" min="0"; max="100000">
2222

2323
</node-projects-slider>
2424
</body>

‎src/slider/SliderWebcomponent.ts

Lines changed: 111 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -89,38 +89,42 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
8989
9090
<!-- Slider -->
9191
<div class="range-input">
92-
<input type="range" class="min-range" min="0" max="10000" value="2500" step="1">
93-
<input type="range" class="max-range" min="0" max="10000" value="7500" step="1">
92+
<input type="range" class="min-range" step="1">
93+
<input type="range" class="max-range" step="1">
9494
</div>
9595
9696
<div class="inputs-wrapper">
97-
<div class="input-field">
98-
<input type="number" class="min-input" value="2500">
99-
</div>
100-
<div class="input-field">
101-
<input type="number" class="max-input" value="7500">
97+
<div class="input-field">
98+
<input type="number" class="min-input">
99+
</div>
100+
<div class="input-field">
101+
<input type="number" class="max-input">
102+
</div>
102103
</div>
103-
</div>
104104
105105
`;
106106

107107
public static readonly is = 'node-projects-slider';
108108

109109
public static properties = {
110+
valueMin: Number,
111+
valueMax: Number,
110112
min: Number,
111113
max: Number
112114
}
113115

114-
static observedAttributes = ['value-min', 'value-max'];
116+
static observedAttributes = ['value-min', 'value-max', 'min', 'max'];
115117

116-
private _ValueMin: number = 0;
118+
private _valueMin: number = 0;
117119
private _valueMax: number = 0;
118-
private _inputValues: HTMLInputElement[];
119-
private _rangeInputvalues: HTMLInputElement[];
120+
private _min: number = 0;
121+
private _max: number = 0;
122+
private _inputs: HTMLInputElement[];
123+
private _rangeInputs: HTMLInputElement[];
120124
private _ready: Boolean = false;
121125

122126
public get valueMin() {
123-
return this._ValueMin;
127+
return this._valueMin;
124128
}
125129
public set valueMin(value) {
126130
this.setAttribute('value-min', value.toString());
@@ -133,17 +137,39 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
133137
this.setAttribute('value-max', value.toString());
134138
}
135139

140+
public get min() {
141+
return this._min;
142+
}
143+
public set min(value) {
144+
this.setAttribute('min', value.toString());
145+
}
146+
147+
public get max() {
148+
return this._max;
149+
}
150+
public set max(value) {
151+
this.setAttribute('max', value.toString());
152+
}
153+
136154
attributeChangedCallback(name: string, oldValue: string, newValue: string) {
137-
if (this._ready) {
155+
//if (this._ready) {
138156
if (name == "value-min"){
139-
this._ValueMin = Number(newValue);
157+
this._valueMin = Number(newValue);
140158
this._valueMinChanged();
141159
}
142160
if (name === "value-max"){
143161
this._valueMax = Number(newValue);
144162
this._valueMaxChanged();
145163
}
146-
}
164+
if (name == "min"){
165+
this._min = Number(newValue);
166+
this._minChanged();
167+
}
168+
if (name === "max"){
169+
this._max = Number(newValue);
170+
this._maxChanged();
171+
}
172+
//}
147173
}
148174

149175
constructor() {
@@ -152,8 +178,8 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
152178
}
153179

154180
connectedCallback() {
155-
this._inputValues = Array.from(this._getDomElements(".inputs-wrapper input"));
156-
this._rangeInputvalues = Array.from(this._getDomElements(".range-input input"));
181+
this._inputs = Array.from(this._getDomElements(".inputs-wrapper input"));
182+
this._rangeInputs = Array.from(this._getDomElements(".range-input input"));
157183
}
158184

159185
disconnectedCallback() {}
@@ -165,20 +191,20 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
165191

166192
let valuesGap = 500;
167193

168-
for (let i = 0; i < this._inputValues.length; i++) {
169-
this._inputValues[i].addEventListener("blur", this._handleInputChange.bind(this));
170-
this._inputValues[i].addEventListener("keydown", (e) => {
194+
for (let i = 0; i < this._inputs.length; i++) {
195+
this._inputs[i].addEventListener("blur", this._handleInputChange.bind(this));
196+
this._inputs[i].addEventListener("keydown", (e) => {
171197
if (e.key === "Enter") {
172198
this._handleInputChange(e);
173199
}
174200
});
175201
}
176202

177203
// Add event listeners to range input elements
178-
for (let i = 0; i < this._rangeInputvalues.length; i++) {
179-
this._rangeInputvalues[i].addEventListener("input", e => {
180-
let minVal = parseInt(this._rangeInputvalues[0].value);
181-
let maxVal = parseInt(this._rangeInputvalues[1].value);
204+
for (let i = 0; i < this._rangeInputs.length; i++) {
205+
this._rangeInputs[i].addEventListener("input", e => {
206+
let minVal = parseInt(this._rangeInputs[0].value);
207+
let maxVal = parseInt(this._rangeInputs[1].value);
182208

183209
let diff = maxVal - minVal;
184210

@@ -187,62 +213,81 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
187213

188214
// Check if the input is the min range input
189215
if ((e.target as HTMLInputElement).className === "min-range") {
190-
this._rangeInputvalues[0].value = (maxVal - valuesGap).toString();
216+
this._rangeInputs[0].value = (maxVal - valuesGap).toString();
191217
} else {
192-
this._rangeInputvalues[1].value = (minVal + valuesGap).toString();
218+
this._rangeInputs[1].value = (minVal + valuesGap).toString();
193219
}
194220
} else {
195221

196222
// Update input values and range progress
197-
this._inputValues[0].value = minVal.toString();
198-
this._inputValues[1].value = maxVal.toString();
199-
rangevalue.style.left = `${(minVal / parseInt(this._rangeInputvalues[0].max)) * 100}%`;
200-
rangevalue.style.right = `${100 - (maxVal / parseInt(this._rangeInputvalues[1].max)) * 100}%`;
223+
this._inputs[0].value = minVal.toString();
224+
this._inputs[1].value = maxVal.toString();
225+
rangevalue.style.left = `${(minVal / parseInt(this._rangeInputs[0].max)) * 100}%`;
226+
rangevalue.style.right = `${100 - (maxVal / parseInt(this._rangeInputs[1].max)) * 100}%`;
201227
}
202228
});
203229
}
204230

205231
this._ready = true;
232+
233+
this._updateInputValues();
234+
this._updateRangeInputsMinMax();
235+
this._updateSliderPosition(this.valueMin, parseInt(this._rangeInputs[0].max), true);
236+
this._updateSliderPosition(this.valueMax, parseInt(this._rangeInputs[1].max), false);
237+
}
238+
239+
private _updateInputValues() {
240+
this._inputs[0].value = this._valueMin.toString();
241+
this._inputs[1].value = this._valueMax.toString();
242+
}
243+
244+
private _updateRangeInputsMinMax() {
245+
this._rangeInputs.forEach(rangeInput => {
246+
rangeInput.min = this._min.toString();
247+
rangeInput.max = this._max.toString();
248+
});
249+
this._rangeInputs[0].value = this.valueMin.toString();
250+
this._rangeInputs[1].value = this.valueMax.toString();
206251
}
207252

208253
private _handleInputChange(e: Event) {
209-
const inputIndex = this._inputValues.indexOf(e.target as HTMLInputElement);
254+
const inputIndex = this._inputs.indexOf(e.target as HTMLInputElement);
210255
if (inputIndex === -1) return;
211256

212-
let minp = parseInt(this._inputValues[0].value);
213-
let maxp = parseInt(this._inputValues[1].value);
257+
let minp = parseInt(this._inputs[0].value);
258+
let maxp = parseInt(this._inputs[1].value);
214259
let diff = maxp - minp;
215260

216-
if (minp < 0) {
217-
alert("Minimum value cannot be less than 0");
218-
this._inputValues[0].value = '0';
261+
if (minp < this._min) {
262+
alert(`{Minimum value cannot be less than $this.min.toString()}`);
263+
this._inputs[0].value = this._min.toString();
219264
minp = 0;
220265
}
221266

222-
if (maxp > 10000) {
223-
alert("Maximum value cannot be greater than 10000");
224-
this._inputValues[1].value = '10000';
225-
maxp = 10000;
267+
if (maxp > this._max) {
268+
alert(`{Maximum value cannot be greater than $this.max.toString()}`);
269+
this._inputs[1].value = this._max.toString();
270+
maxp = this._max;
226271
}
227272

228273
if (minp > maxp - diff) {
229-
this._inputValues[0].value = (maxp - diff).toString();
274+
this._inputs[0].value = (maxp - diff).toString();
230275
minp = maxp - diff;
231276

232-
if (minp < 0) {
233-
this._inputValues[0].value = '0';
234-
minp = 0;
277+
if (minp < this._min) {
278+
this._inputs[0].value = this._min.toString();
279+
minp = this._min;
235280
}
236281
}
237282

238-
if (diff >= 500 && maxp <= parseInt(this._rangeInputvalues[1].max)) {
283+
if (diff >= 500 && maxp <= parseInt(this._rangeInputs[1].max)) {
239284
if (inputIndex === 0) {
240-
this._rangeInputvalues[0].value = minp.toString();
241-
let value1 = parseInt(this._rangeInputvalues[0].max);
285+
this._rangeInputs[0].value = minp.toString();
286+
let value1 = parseInt(this._rangeInputs[0].max);
242287
this._updateSliderPosition(minp, value1, true);
243288
} else {
244-
this._rangeInputvalues[1].value = maxp.toString();
245-
let value2 = parseInt(this._rangeInputvalues[1].max);
289+
this._rangeInputs[1].value = maxp.toString();
290+
let value2 = parseInt(this._rangeInputs[1].max);
246291
this._updateSliderPosition(maxp, value2, false);
247292
}
248293
}
@@ -258,13 +303,25 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
258303
}
259304

260305
private _valueMinChanged() {
261-
this._inputValues[0].value = this._ValueMin.toString();
262-
this._inputValues[0].dispatchEvent(new Event('blur', { bubbles: true }));
306+
if (!this._ready) return;
307+
this._inputs[0].value = this._valueMin.toString();
308+
this._inputs[0].dispatchEvent(new Event('blur', { bubbles: true }));
263309
}
264310

265311
private _valueMaxChanged() {
266-
this._inputValues[1].value = this._valueMax.toString();
267-
this._inputValues[1].dispatchEvent(new Event('blur', { bubbles: true }));
312+
if (!this._ready) return;
313+
this._inputs[1].value = this._valueMax.toString();
314+
this._inputs[1].dispatchEvent(new Event('blur', { bubbles: true }));
315+
}
316+
317+
private _minChanged() {
318+
if (!this._ready) return;
319+
this._updateRangeInputsMinMax();
320+
}
321+
322+
private _maxChanged() {
323+
if (!this._ready) return;
324+
this._updateRangeInputsMinMax();
268325
}
269326
}
270327

0 commit comments

Comments
 (0)