Element.prototype.insertChildAtIndex = function(child, index) {
    if (!index) index = 0;

    if (index >= this.children.length) {
        this.appendChild(child);
    } else {
        this.insertBefore(child, this.children[index]);
    }
}

Element.prototype.clearChildren = function() {
    while (this.firstChild) {
        this.removeChild(this.lastChild);
    }
}

Number.prototype.pad = function(size) {
    var s = String(this);
    while (s.length < (size || 2)) {s = "0" + s;}
    return s;
}

window.addEventListener("load", init);

function init() {
    const sliders = document.querySelectorAll('input[type="range"]');
    for (let slider of sliders) {
        let changeFunction = event => {
            const progress = event.target.value;
            const max = event.target.max;
            const value = Math.round(progress / max * 100);
            slider.style.background = `linear-gradient(90deg, rgba(200,55,55,1) ${value}%, #333 ${value}%)`;
        };

        slider.setValue = value => {
            if (slider.mousedown) return;
            slider.value = value;
            changeFunction({target: slider});
        }

        slider.addEventListener("mousedown", event => slider.mousedown = true);
        slider.addEventListener("mouseup", event => slider.mousedown = false);

        slider.addEventListener("input", changeFunction);
        slider.addEventListener("change", changeFunction);
        changeFunction({target: slider});
    }
}