-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
28 lines (20 loc) · 918 Bytes
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const range = document.getElementById('range');
range.addEventListener('input', (e) => {
const value = +e.target.value; // '+' converts value to number
const label = e.target.nextElementSibling;
const range_width = getComputedStyle(e.target).getPropertyValue('width');
const label_width = getComputedStyle(label).getPropertyValue('width');
const num_range_width = +range_width.substring(0, range_width.length - 2);
const num_label_width = +label_width.substring(0, label_width.length - 2);
const max = +e.target.max;
const min = +e.target.min;
const left =
value * (num_range_width / max) -
num_label_width / 2 +
scale(value, min, max, 10, -10);
label.style.left = `${left}px`;
label.innerHTML = value;
});
const scale = (num, in_min, in_max, out_min, out_max) => {
return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
};