Skip to content

Commit fb4a874

Browse files
author
Kevin Glier
committed
Fix problem with initial button positions
1 parent 42e00ed commit fb4a874

File tree

2 files changed

+108
-21
lines changed

2 files changed

+108
-21
lines changed

‎doc/example.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" href="../src/om-javascript-range-slider.css">
5+
</head>
6+
<body>
7+
8+
<input type="range" name="pieces" id="inputPieces" multiple value="15,90" min="5" max="235" unit=" Pcs." style="width: 250px">
9+
10+
<div>
11+
<h4>Example get value by event in JavaScript</h4>
12+
<span id="displaySelectedRange"></id>
13+
</div>
14+
15+
<script>
16+
// Example to subscribe to range changes
17+
document.getElementById('inputPieces').addEventListener('rangechange', function(e) {
18+
document.getElementById('displaySelectedRange').innerText = e.detail.join(' - ');
19+
}, true);
20+
</script>
21+
22+
<script src="../src/om-javascript-range-slider.js"></script>
23+
<script>
24+
OmRangeSlider.init({ inputValueStyle: OmRangeSliderInputValueStyles.PHP_ARRAY });
25+
</script>
26+
27+
</body>
28+
</html>

‎src/om-javascript-range-slider.js‎

Lines changed: 80 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
1-
function OmRangeSlider(inputSelector) {
1+
const OmRangeSliderInputValueStyles = {
2+
DEFAULT_COMMA_SEPARATED: 0,
3+
PHP_ARRAY: 1,
4+
ASP_ARRAY: 2
5+
}
6+
7+
function OmRangeSlider(inputElement, inputValueStyle) {
28
const that = this;
39

4-
let input = undefined;
10+
let input = inputElement;
11+
let inputValueEnd = undefined;
512
let elementRange = undefined;
613
let buttonStart = undefined;
714
let buttonEnd = undefined;
@@ -13,19 +20,30 @@ function OmRangeSlider(inputSelector) {
1320

1421
let debug = false;
1522

16-
this.settings = {
23+
let settings = {
1724
min: 0,
1825
max: 10,
19-
unit: ''
26+
unit: '',
27+
inputValueStyle: inputValueStyle
2028
};
21-
const settings = this.settings;
2229

2330
this.setRange = function (range) {
2431
rangeValue = range;
2532
displayValueStart.textContent = range[0] + settings.unit;
2633
displayValueEnd.textContent = range[1] + settings.unit;
2734
triggerRangeChangeEvent(range);
28-
input.value = rangeValue.join(',');
35+
36+
switch (settings.inputValueStyle) {
37+
default:
38+
case OmRangeSliderInputValueStyles.DEFAULT_COMMA_SEPARATED:
39+
input.value = rangeValue.join(',');
40+
break;
41+
case OmRangeSliderInputValueStyles.PHP_ARRAY:
42+
case OmRangeSliderInputValueStyles.ASP_ARRAY:
43+
input.value = rangeValue[0];
44+
inputValueEnd.value = rangeValue[1];
45+
break;
46+
}
2947
return that;
3048
};
3149

@@ -70,9 +88,7 @@ function OmRangeSlider(inputSelector) {
7088
}, {passive: false});
7189
}
7290

73-
function initVisuals(inputElement) {
74-
75-
input = inputElement;
91+
function initVisuals() {
7692

7793
const visualSliderContainer = document.createElement('div');
7894
visualSliderContainer.className = input.className;
@@ -138,27 +154,63 @@ function OmRangeSlider(inputSelector) {
138154

139155
const range = input.value ? input.value.split(',').map(x => +x.trim()) : undefined;
140156

157+
switch (settings.inputValueStyle) {
158+
default:
159+
case OmRangeSliderInputValueStyles.DEFAULT_COMMA_SEPARATED:
160+
break;
161+
case OmRangeSliderInputValueStyles.PHP_ARRAY:
162+
inputValueEnd = document.createElement('input');
163+
inputValueEnd.hidden = true;
164+
inputValueEnd.name = input.name + '[]';
165+
input.parentNode.insertBefore(inputValueEnd, input.nextSibling);
166+
input.name = input.name + '[]';
167+
break;
168+
case OmRangeSliderInputValueStyles.ASP_ARRAY:
169+
inputValueEnd = document.createElement('input');
170+
inputValueEnd.hidden = true;
171+
inputValueEnd.name = input.name;
172+
input.parentNode.insertBefore(inputValueEnd, input.nextSibling);
173+
break;
174+
}
175+
141176
that.setRange([range[0] ?? settings.min, range[1] ?? settings.max]);
142177
refreshButtonPositions();
143178
refreshRangeIndicator();
144179
}
145180

146181
function refreshButtonPositions() {
182+
const elementRangeWidth = elementRange.getBoundingClientRect().width;
183+
const buttonStartWidth = buttonStart.getBoundingClientRect().width;
184+
const buttonEndWidth = buttonEnd.getBoundingClientRect().width;
185+
147186
const range = settings.max - settings.min;
148-
149-
buttonStart.style.left = Math.round((rangeValue[0] - settings.min) * elementRange.clientWidth / range) + 'px';
150-
buttonEnd.style.left = Math.round(((rangeValue[1] - settings.min) * elementRange.clientWidth / range) - buttonEnd.clientWidth) + 'px';
187+
const factor = (elementRangeWidth - buttonStartWidth - buttonEndWidth) / range;
188+
189+
const valueStart = rangeValue[0] - settings.min;
190+
const valueEnd = rangeValue[1] - settings.min;
191+
192+
const buttonStartLeft = Math.floor(valueStart * factor);
193+
const buttonEndLeft = buttonStartWidth + Math.floor(valueEnd * factor);
194+
195+
buttonStart.style.left = buttonStartLeft + 'px';
196+
buttonEnd.style.left = buttonEndLeft + 'px';
151197
}
152198

153199
function refreshRangeIndicator() {
154-
rangeIndicator.style.left = parseInt(buttonStart.style.left) + (buttonStart.getBoundingClientRect().width / 2) + 'px';
155-
rangeIndicator.style.right = elementRange.getBoundingClientRect().width - parseInt(buttonEnd.style.left) - (buttonEnd.getBoundingClientRect().width / 2);
200+
const elementRangeWidth = elementRange.getBoundingClientRect().width;
201+
const buttonStartWidth = buttonStart.getBoundingClientRect().width;
202+
const buttonEndWidth = buttonEnd.getBoundingClientRect().width;
203+
204+
const buttonStartMiddle = Math.round(parseInt(buttonStart.style.left) + (buttonStartWidth / 2));
205+
const buttonEndMiddle = Math.round(elementRangeWidth - (parseInt(buttonEnd.style.left) + (buttonEndWidth / 2)));
206+
rangeIndicator.style.left = buttonStartMiddle + 'px';
207+
rangeIndicator.style.right = buttonEndMiddle + 'px';
156208
}
157209

158210
function triggerRangeChangeEvent(range) {
159-
const event = new CustomEvent('rangechange', range);
211+
const event = new CustomEvent('rangechange', { detail: rangeValue });
160212
input.value = this.range ? this.range.join(',') : '';
161-
input.dispatchEvent(event);
213+
input.dispatchEvent(event);
162214
}
163215

164216
function updateValues() {
@@ -236,8 +288,8 @@ function OmRangeSlider(inputSelector) {
236288

237289
if (newX !== parseInt(activeButton.style.left)) {
238290
activeButton.style.left = newX + 'px';
239-
refreshRangeIndicator();
240291
updateValues();
292+
refreshRangeIndicator();
241293
}
242294
}
243295
}
@@ -276,15 +328,22 @@ function OmRangeSlider(inputSelector) {
276328
}
277329

278330
this.initialize = function () {
279-
initVisuals(inputSelector);
331+
initVisuals();
280332
initEventSubscriptions();
281333
};
282334
}
283335

284-
OmRangeSlider.init = function (selector = 'input[type=range][multiple]') {
285-
const rangeSliders = document.querySelectorAll(selector);
336+
OmRangeSlider.init = function (settings) {
337+
338+
const defaultSettings = {
339+
selector: 'input[type=range][multiple]',
340+
inputValueStyle: OmRangeSliderInputValueStyles.DEFAULT_COMMA_SEPARATED
341+
};
342+
settings = settings ? Object.assign(defaultSettings, settings) : defaultSettings;
343+
344+
const rangeSliders = document.querySelectorAll(settings.selector);
286345
for (const rangeSlider of rangeSliders) {
287-
(new OmRangeSlider(rangeSlider))
346+
(new OmRangeSlider(rangeSlider, settings.inputValueStyle))
288347
.setDebug(false)
289348
.initialize();
290349
}

0 commit comments

Comments
 (0)