document.addEventListener("DOMContentLoaded", function () {
    const slider = document.getElementById("basic-slider");
    const output = document.getElementById("basic-slider-value");

    function updateSliderColor(value) {
        const percent = (value - slider.min) / (slider.max - slider.min) * 100;
        slider.style.background = `linear-gradient(to right, #1e5bff 0%, #1e5bff ${percent}%, #ccc ${percent}%, #ccc 100%)`;
    }

    slider.addEventListener("input", function () {
        output.textContent = slider.value;
        updateSliderColor(slider.value);
    });

    updateSliderColor(slider.value); // init
});