HTML5 seekBar not updating after clicked despite updating its value

Question

I've been digging around for a while looking for why the seekBar is not updating after being clicked, and no luck so far. I've been doing this in Chrome because Firefox doesn't natively support the HTML5 audio tag.

Here's basically what I've got:

<script>
  var seekBar;
  var player;
  function initPlayer(){
    seekBar = document.getElementById('seekBar');
    player = document.getElementById('playcontrol');
    seekBar.setAttribute('max', player.duration);
    player.addEventListener('timeupdate', function(){
      seekBar.setAttribute('value', player.currentTime);
    });
  }
</script>
...
<audio id="playcontrol" src="Song.mp3" preload="auto"></audio>
<input id="seekBar" type="range" step="any" onchange="player.currentTime = this.value" min="0" max="10" value="0">

I run initPlayer() after the page loads and run "player.play();" on the console to start the audio. This all works great, until I manually click on a position within the seekBar.

When I do, it jumps to the part of the audio just as it should, however, even though the value attribute continues to get updated, the visual bar position no longer changes.

Why is the visual position static after clicking on it? Is there some hack or work around to fix this?