HTML / JavaScript滑块无法在移动设备上使用

Question

因此，我的网站StudyScapes.net带有一个音量滑块，可以在PC上的浏览器中完美运行。但是，滑块是可移动的，但对移动设备没有影响。

<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的新手，所以我不确定问题出在哪里。