document.addEventListener('DOMContentLoaded', function () {
    const rangeInputs = document.querySelectorAll('input[type="range"]');

    rangeInputs.forEach(rangeInput => {
        // Get the maximum value
        const max = rangeInput.max;

        // Get the initial value; if not set, default to 0
        const initialValue = rangeInput.value ? Number(rangeInput.value) : 50;	// This may not work on all browsers. Firefox defaults this to 50
        // console.log("initial val: " + initialValue);
        
        const initialPercentage = (initialValue / max) * 100;

        // Set the initial thumb position
        rangeInput.style.setProperty('--value', `${initialPercentage}%`);

        rangeInput.addEventListener('input', function () {
            const value = rangeInput.value;
            const percentage = (value / max) * 100;

            // Update the width of the thumb based on the percentage
            rangeInput.style.setProperty('--value', `${percentage}%`);
        });
    });
});