title: Video Volume Slider in HTML5 and JavaScript
body: <p>I'm trying to make a video player with a custom UI using the HTML5 <code>&lt;video&gt;</code> tag and some JavaScript. My volume slider won't work though.</p>
  <p>The way I've tried to do it is to write a function which sets the volume over and over at 1ms intervals. Obviously if they haven't touched the slider since the last cycle the volume shouldn't change. 1ms isn't a very long time so I tried increasing it to 100ms to see if it would help. It didn't.</p>
  <p>No matter what position I set the slider to the volume stays at the default value. Can this be done without using a custom library? If so, how?</p>
  <p>HTML:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;video id="video" autoplay&gt;
       &lt;source src="/720p.mp4" type="video/mp4"&gt;
      &lt;/video&gt;
      &lt;input id="vol-control" type="range" min="0" max="100" step="1"&gt;&lt;/input&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>JavaScript:</p>
  <pre><code>var video = document.getElementById('video');
  var volu3 = document.getElementById('vol-control');
  
  window.setInterval(changevolume(), 1);
  
  function changevolume() {
  
   var x = volu3.value;
   var y = x / 100;
  
   video.volume = y;
  
  }
  </code></pre>