Skip to content

Commit c757fbd

Browse files
7evenk7evenk
committed
Ensure range sliders update their position only after confirmed input changes
1 parent a29f945 commit c757fbd

File tree

1 file changed

+85
-78
lines changed

1 file changed

+85
-78
lines changed

‎src/slider/SliderWebcomponent.ts

Lines changed: 85 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -113,10 +113,10 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
113113

114114
static observedAttributes = ['min', 'max'];
115115

116-
private _min: Number = 0;
117-
private _max: Number = 0;
118-
private _inputValues: HTMLInputElement[] = Array.from(this._getDomElements(".inputs-wrapper input"));
119-
private _rangeInputvalues: HTMLInputElement[] = this._getDomElements(".range-input input");
116+
private _min: number = 0;
117+
private _max: number = 0;
118+
private _inputValues: HTMLInputElement[];
119+
private _rangeInputvalues: HTMLInputElement[];
120120

121121
public get min() {
122122
return this._min;
@@ -128,18 +128,17 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
128128
public get max() {
129129
return this._max;
130130
}
131-
132131
public set max(value) {
133132
this.setAttribute('max', value.toString());
134133
}
135134

136-
attributeChangedCallback(name: string, oldValue, newValue) {
135+
attributeChangedCallback(name: string, oldValue: string, newValue: string) {
137136
if (name == "min"){
138-
this._min = newValue;
137+
this._min = Number(newValue);
139138
this._minChanged();
140139
}
141140
if (name === "max"){
142-
this._max = newValue;
141+
this._max = Number(newValue);
143142
this._maxChanged();
144143
}
145144
}
@@ -150,10 +149,11 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
150149
}
151150

152151
connectedCallback() {
152+
this._inputValues = [];
153+
this._rangeInputvalues = [];
153154
}
154155

155-
disconnectedCallback() {
156-
}
156+
disconnectedCallback() {}
157157

158158
ready() {
159159
this._parseAttributesToProperties();
@@ -163,97 +163,104 @@ export class SliderWebcomponent extends BaseCustomWebComponentConstructorAppend
163163
let valuesGap = 500;
164164

165165
for (let i = 0; i < this._inputValues.length; i++) {
166-
167-
this._inputValues[i].addEventListener("input", e => {
168-
169-
// Parse min and max values of the range input
170-
let minp = parseInt(this._inputValues[0].value);
171-
let maxp = parseInt(this._inputValues[1].value);
172-
let diff = maxp - minp
173-
174-
if (minp < 0) {
175-
alert("minimum price cannot be less than 0");
176-
this._inputValues[0].value = '0';
177-
minp = 0;
166+
this._inputValues[i].addEventListener("blur", this._handleInputChange.bind(this));
167+
this._inputValues[i].addEventListener("keydown", (e) => {
168+
if (e.key === "Enter") {
169+
this._handleInputChange(e);
178170
}
171+
});
172+
}
179173

180-
// Validate the input values
181-
if (maxp > 10000) {
182-
alert("maximum price cannot be greater than 10000");
183-
this._inputValues[1].value = '10000';
184-
maxp = 10000;
185-
}
174+
// Add event listeners to range input elements
175+
for (let i = 0; i < this._rangeInputvalues.length; i++) {
176+
this._rangeInputvalues[i].addEventListener("input", e => {
177+
let minVal = parseInt(this._rangeInputvalues[0].value);
178+
let maxVal = parseInt(this._rangeInputvalues[1].value);
186179

187-
if (minp > maxp - valuesGap) {
188-
this._inputValues[0].value = (maxp - valuesGap).toString();
189-
minp = maxp - valuesGap;
180+
let diff = maxVal - minVal;
190181

191-
if (minp < 0) {
192-
this._inputValues[0].value = '0';
193-
minp = 0;
194-
}
195-
}
182+
// Check if the values gap is exceeded
183+
if (diff < valuesGap) {
196184

197-
// Check if the values gap is met
198-
// and max value is within the range
199-
if (diff >= valuesGap && maxp <= parseInt(this._rangeInputvalues[1].max)) {
200-
if ((e.target as HTMLInputElement).className === "min-input") {
201-
this._rangeInputvalues[0].value = minp.toString();
202-
let value1 = parseInt(this._rangeInputvalues[0].max);
203-
rangevalue.style.left = `${(minp / value1) * 100}%`;
204-
}
205-
else {
206-
this._rangeInputvalues[1].value = maxp.toString();
207-
let value2 = parseInt(this._rangeInputvalues[1].max);
208-
rangevalue.style.right =
209-
`${100 - (maxp / value2) * 100}%`;
185+
// Check if the input is the min range input
186+
if ((e.target as HTMLInputElement).className === "min-range") {
187+
this._rangeInputvalues[0].value = (maxVal - valuesGap).toString();
188+
} else {
189+
this._rangeInputvalues[1].value = (minVal + valuesGap).toString();
210190
}
191+
} else {
192+
193+
// Update input values and range progress
194+
this._inputValues[0].value = minVal.toString();
195+
this._inputValues[1].value = maxVal.toString();
196+
rangevalue.style.left = `${(minVal / parseInt(this._rangeInputvalues[0].max)) * 100}%`;
197+
rangevalue.style.right = `${100 - (maxVal / parseInt(this._rangeInputvalues[1].max)) * 100}%`;
211198
}
212199
});
200+
}
201+
}
213202

214-
// Add event listeners to range input elements
215-
for (let i = 0; i < this._rangeInputvalues.length; i++) {
216-
this._rangeInputvalues[i].addEventListener("input", e => {
217-
let minVal = parseInt(this._rangeInputvalues[0].value);
218-
let maxVal = parseInt(this._rangeInputvalues[1].value);
203+
private _handleInputChange(e: Event) {
204+
const inputIndex = this._inputValues.indexOf(e.target as HTMLInputElement);
205+
if (inputIndex === -1) return;
219206

220-
let diff = maxVal - minVal
207+
let minp = parseInt(this._inputValues[0].value);
208+
let maxp = parseInt(this._inputValues[1].value);
209+
let diff = maxp - minp;
221210

222-
// Check if the values gap is exceeded
223-
if (diff < valuesGap) {
211+
if (minp < 0) {
212+
alert("Minimum value cannot be less than 0");
213+
this._inputValues[0].value = '0';
214+
minp = 0;
215+
}
224216

225-
// Check if the input is the min range input
226-
if ((e.target as HTMLInputElement).className === "min-range") {
227-
this._rangeInputvalues[0].value = (maxVal - valuesGap).toString();
228-
}
229-
else {
230-
this._rangeInputvalues[1].value = (minVal + valuesGap).toString();
231-
}
232-
}
233-
else {
217+
if (maxp > 10000) {
218+
alert("Maximum value cannot be greater than 10000");
219+
this._inputValues[1].value = '10000';
220+
maxp = 10000;
221+
}
234222

235-
// Update input values and range progress
236-
this._inputValues[0].value = minVal.toString();
237-
this._inputValues[1].value = maxVal.toString();
238-
rangevalue.style.left = `${(minVal / parseInt(this._rangeInputvalues[0].max)) * 100}%`;
239-
rangevalue.style.right = `${100 - (maxVal / parseInt(this._rangeInputvalues[1].max)) * 100}%`;
240-
}
241-
});
223+
if (minp > maxp - diff) {
224+
this._inputValues[0].value = (maxp - diff).toString();
225+
minp = maxp - diff;
226+
227+
if (minp < 0) {
228+
this._inputValues[0].value = '0';
229+
minp = 0;
242230
}
243231
}
232+
233+
if (diff >= 500 && maxp <= parseInt(this._rangeInputvalues[1].max)) {
234+
if (inputIndex === 0) {
235+
this._rangeInputvalues[0].value = minp.toString();
236+
let value1 = parseInt(this._rangeInputvalues[0].max);
237+
this._updateSliderPosition(minp, value1, true);
238+
} else {
239+
this._rangeInputvalues[1].value = maxp.toString();
240+
let value2 = parseInt(this._rangeInputvalues[1].max);
241+
this._updateSliderPosition(maxp, value2, false);
242+
}
243+
}
244+
}
245+
246+
private _updateSliderPosition(value: number, max: number, isMin: boolean) {
247+
const rangevalue: HTMLDivElement = this._getDomElement("slider");
248+
if (isMin) {
249+
rangevalue.style.left = `${(value / max) * 100}%`;
250+
} else {
251+
rangevalue.style.right = `${100 - (value / max) * 100}%`;
252+
}
244253
}
245254

246255
private _minChanged() {
247256
this._inputValues[0].value = this._min.toString();
248-
this._inputValues[0].dispatchEvent(new Event('input', { bubbles: true }));
249-
this._rangeInputvalues[0].dispatchEvent(new Event('input', { bubbles: true }));
257+
this._inputValues[0].dispatchEvent(new Event('blur', { bubbles: true }));
250258
}
251259

252260
private _maxChanged() {
253261
this._inputValues[1].value = this._max.toString();
254-
this._inputValues[1].dispatchEvent(new Event('input', { bubbles: true }));
255-
this._rangeInputvalues[1].dispatchEvent(new Event('input', { bubbles: true }));
262+
this._inputValues[1].dispatchEvent(new Event('blur', { bubbles: true }));
256263
}
257264
}
258265

259-
customElements.define(SliderWebcomponent.is, SliderWebcomponent);
266+
customElements.define(SliderWebcomponent.is, SliderWebcomponent);

0 commit comments

Comments
 (0)