title: How do I get the value of a slider to update in real-time?
body: <p>I have an HTML video tag with a customized control bar and in it I want both the seek bar and volume bar to update their values in real-time as the user scrubs through the range. Currently the volume updates after the user adjusts the slider and not while the user is clicking-and-dragging.</p>
  
  <p>In HTML I have them set up as such:</p>
  
  <pre><code>&lt;div id="video-controls"&gt;
  // ...
  &lt;input type="range" id="seek-bar" value="0"&gt;
  &lt;input type="range" id="volume-bar" min="0" max="1" step="0.01" value="1"&gt;
  // ...
  &lt;/div&gt;
  </code></pre>
  
  <p>And in my JavaScript I have them hooked up like so:</p>
  
  <pre><code>// Change current viewing time when scrubbing through the progress bar
  seekBar.addEventListener('change', function() {
      // Calculate the new time
      var time = video.duration * (seekBar.value / 100);
  
      // Update the video time
      video.currentTime = time;
  });
  
  // Update the seek bar as the video plays
  video.addEventListener('timeupdate', function() {
      // Calculate the slider value
      var value = (100 / video.duration) * video.currentTime;
  
      // Update the slider value
      seekBar.value = value;
  });
  
  // Pause the video when the seek handle is being dragged
  seekBar.addEventListener('mousedown', function() {
      video.pause();
  });
  
  // Play the video when the seek handle is dropped
  seekBar.addEventListener('mouseup', function() {
      video.play();
  });
  
  // Adjust video volume when scrubbing through the volume bar
  volumeBar.addEventListener('change', function() {
      // Update the video volume
      video.volume = volumeBar.value;
  });
  </code></pre>
  
  <p>I want to do this from scratch and not use JavaScript libraries like jQuery even though I know this has already been done for that library. Most of the solutions I've seen involve jQuery but I don't want to use it. This is for: reducing the dependency on jQuery, allowing for more control on my end, and primarily as a learning experience.</p>