AbemaTVで音量調節用スライダー設置

var result = document.evaluate('//video', document, null, 7, null);
var result2 = document.evaluate('//header/p', document, null, 7, null);
      if(document.getElementById("hoge") == null){
    result2.snapshotItem(0).insertAdjacentHTML('afterend', '<input type="range" name="example" step="1" max="100" id="hoge">');
      }
    document.getElementById("hoge").addEventListener('change', function () {
      for (var i = 0; i < result.snapshotLength; i++) {
        result.snapshotItem(i).volume = document.getElementById("hoge").value / 100;
        this.title = document.getElementById("hoge").value + "%";
      }
    }, false);

http://scratchpad.io/flaky-change-6919

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  background-color: #333333;
  height: 2px;
  width: 100%;
  border-radius: 6px;
}

/*for chrome*/
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  position: relative;
  border: none;
  width: 16px;
  height: 16px;
  display: block;
  background-color: #51C300;
  border-radius: 50%;
  -webkit-border-radius: 50%;
}

/*for firefox*/
input[type=range]::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  position: relative;
  border: none;
  width: 16px;
  height: 16px;
  display: block;
  background-color: #51C300;
  border-radius: 50%;
  -webkit-border-radius: 50%;
}
input[type=range]::-moz-range-track{
    background-color: #333;
}