HTML / JavaScript слайдер не работает на мобильных устройствах

Question

Итак, мой сайт StudyScapes.net имеет ползунок громкости, который отлично работает в моих браузерах на моем ПК. Тем не менее, ползунки являются подвижными, но не влияют на мобильные устройства.

<style>
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100px;
  height: 15px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  position: relative;
  top: 135px;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}
</style>

<div class="slidecontainer">
  <input type="range" min="0" max="100" value="100" class="slider" id="volume">
</div>

<audio id="Thunder" loop>
   <source src="http://music.wixstatic.com/preview/38d0c2_064b409cb5594774ab3c1fa24f9afa2f-128.mp3" type="audio/wav" />
</audio>

<script type="text/javascript">

volume.addEventListener("mousemove", thunderVolume);

function thunderVolume(){
    document.getElementById("Thunder").volume = document.getElementById("volume").value / 100;
}
    </script>

Любая помощь приветствуется. Я новичок в HTML, JavaScript и CSS, поэтому я не уверен, в чем проблема.