<div>
<input id="range" type="range" value="0">
<div id="output">0</div>
</div>
body {
display: grid;
place-items: center;
height: 100vh;
}
input[type="range"] {
width: calc(180px * 1);
}
#output {
font-family: system-ui, sans-serif;
font-variant-numeric: tabular-nums;
text-align: center;
}
View Compiled
const RANGE_VALUES = [
0,
100,
500,
1000,
1500,
2000,
2500,
3000,
3500,
4000,
5000,
6000,
7000,
8000,
9000,
10000,
15000,
20000,
25000,
30000,
35000,
40000,
45000,
50000,
60000,
70000,
80000,
90000,
100000,
150000,
200000,
250000,
300000
];
const output = document.querySelector("#output");
const range = document.querySelector("#range");
// init
range.setAttribute("min", RANGE_VALUES[0]);
range.setAttribute("max", RANGE_VALUES[RANGE_VALUES.length - 1]);
/**
* Returns the closest number in the array.
* @param {Number} num
* @param {Array} arr
* @return {Number}
*/
function closestNumber(num, arr = RANGE_VALUES) {
return arr.reduce((prev, curr) => {
return Math.abs(curr - num) < Math.abs(prev - num) ? curr : prev;
});
}
range.addEventListener("input", function () {
// this.value = closestNumber(Number(this.value));
output.innerText = closestNumber(Number(this.value));
});
View Compiled
This Pen doesn't use any external JavaScript resources.