https://arcryo.ca/wp-content/plugins/wp-generator-shortcodes/addons/wpforms/wgs-wpforms-range-slider.mjs

1
2/**
3 * Update the range slider so that only the currently selected option is visible in the attached datalist
4 * @template {HTMLInputElement} T
5 * @this {HTMLInputElement}
6 * @param {ElementEvent<T>} ev
7 */
8export function update_slider(ev) {
9    const elem    = ev.target;
10    Array.from(elem.list?.children ?? []).forEach((/** @type {HTMLOptionElement} */ option) => {
11        option?.classList.toggle("selected", option.title == elem.value);
12    });
13}
14
15/**
16 * Update range slider to display current value inside the thumb
17 * @param {HTMLInputElement} input
18 */
19function initialize_range_slider(input) {
20    const min  = Number(input.min),
21          max  = Number(input.max),
22          step = Number(input.step),
23          id   = input.name+"_daylist";
24    document.getElementById(id)?.remove();
25
26    const datalist = input.insertAdjacentElement("afterend",
27        document.createElementWithAttrs("datalist", { id: `${input.name}_daylist` })
28    );
29    input.setAttribute("list", datalist.id);
30
31    for ( let i = min; i <= max; i += step )
32        datalist.append(document.createElementWithAttrs("option", { title: String(i) }));
33
34    input.addEventListener("input" , update_slider);
35    input.addEventListener("change", update_slider);
36    input.dispatchEvent(new Event("input"));
37}
38
39export default function initialize_range_sliders() {
40    document.querySelectorAll("input[type='range']", "input").forEach(initialize_range_slider);
41}