Bandcamp Volume Slider

A subtle volume slider for Bandcamp sites

// ==UserScript==
// @namespace   raina
// @name        Bandcamp Volume Slider
// @author      raina
// @description A subtle volume slider for Bandcamp sites
// @version     0.2
// @include     /^https?:\/\//
// @run-at      document-end
// @grant       none
// ==/UserScript==
window.self === window.top && window.siteroot && "https://bandcamp.com" == window.siteroot && (function() {
    const progbar_empty = document.querySelector('.progbar_empty');
    const progbar_fill = document.querySelector('.progbar_fill');
    const thumb = document.querySelector('.progbar .thumb');
    const style = document.createElement("style");
    style.textContent = `
        #volume_cell {
            vertical-align: middle;
        }
        #volume_ctrl {
            -moz-appearance: none;
            -webkit-appearance: none;
            background-color: ${getComputedStyle(progbar_empty).getPropertyValue("background-color")};
            background-image: linear-gradient(${getComputedStyle(progbar_fill).getPropertyValue("background-color")}, ${getComputedStyle(progbar_fill).getPropertyValue("background-color")});
            background-repeat: repeat-y;
            border: ${getComputedStyle(progbar_empty).getPropertyValue("border-top-color")} 1px solid;
            height: 8px;
            width: 45px;
        }
        #volume_ctrl::-webkit-slider-thumb,
        #volume_ctrl::-moz-range-thumb {
            -moz-appearance: none;
            -webkit-appearance: none;
            background: ${getComputedStyle(thumb).getPropertyValue("background-color")};
            box-shadow: ${getComputedStyle(thumb).getPropertyValue("border-top-color")} 0 0 0 1px inset;
            border: none;
            border-radius: 1px;
            height: 12px;
            width: 20px;
        }
    `;
    document.head.appendChild(style);
    const player_title = document.querySelector('.track_cell');
    const volume_cell = document.createElement("td");
    volume_cell.id = "volume_cell";
    volume_cell.setAttribute("colspan", 2);
    const volume_ctrl = document.createElement("input");
    volume_ctrl.id = "volume_ctrl";
    volume_ctrl.type = "range";
    volume_ctrl.min = 0;
    volume_ctrl.max = 100;
    volume_ctrl.step = 10;
    volume_ctrl.value = 70;
    volume_ctrl.addEventListener("input", ev => {
    volume_ctrl.style.backgroundSize = parseInt(volume_ctrl.value, 10) + "%";
        volume_ctrl.style.backgroundSize = parseInt(ev.target.value, 10) + "%";
        [].forEach.call(document.querySelectorAll("audio"), track => {
            track.volume = parseInt(ev.target.value, 10) / 100;
        });
    });
    volume_cell.appendChild(volume_ctrl);
    player_title.removeAttribute("colspan");
    player_title.parentElement.appendChild(volume_cell);
    document.addEventListener("load", ev => console.log("moo"));
}());