<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

External CSS

  1. https://unpkg.com/shokika.css@latest/dist/shokika.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.