Simultaneous input/output on input element

Question

I have a web audio player, and below is a very basic simulation of how the seekbar works. I've got a standard progress bar showing how far the audio track has played, and then to allow user input I've got an input bar over the top which only appears on hover.

The user can then select a new point to play audio from. However it annoys me that the input bar doesn't update with the track - on hover, the handle is always at the wrong place.

Is there a way to update the input handle position, without blocking user input? When I push an update to the input to update it from JS, I've been having issues where it blocks or ignores any user input. Is there a nice way to make this work?

var p = document.getElementById("progress");
var r = document.getElementById("input");
var i = 0;

r.addEventListener("change", function() {
  i = parseInt(r.value);
});


function playSecond(n) {
  if (i < n) {
    i++;
    p.value = i;
    setTimeout(playSecond, 500, n);
  }
}
playSecond(101);

#seekbar {
  width: 100%;
  height: 24px;
  position: relative;
}

#seekbar progress {
  width: 100%;
  height: 100%;
  padding: 8px 0;
}

#seekbar input {
  width: 100%;
  height: 100%;
  z-index: 100000;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

#seekbar:hover input {
  display: block;
}

<div id="seekbar">
  <progress id="progress" max="100" value="0"></progress>
  <input id="input" type="range" min="0" max="100" value="0">
</div>

Answer 1

You mean like this?

I moved the slider while testing to make it easier to see/grab and added a debug span

var p = document.getElementById("progress");
var r = document.getElementById("input");
var o = document.getElementById("output");
var i = 0;

r.addEventListener("change", function() {
  i = parseInt(r.value);
});


function playSecond(n) {
  if (i < n) {
    i++;
    p.value = i;
    r.value = i;    
    output.textContent = i;
    setTimeout(playSecond, 500, n);
  }
}
playSecond(101);

#seekbar {
  width: 100%;
  height: 24px;
  position: relative;
}

#seekbar progress {
  width: 100%;
  height: 100%;
  padding: 8px 0;
}

#seekbar input {
  width: 100%;
  height: 100%;
  z-index: 100000;
  position: absolute;
  display: none;
}

#seekbar:hover input {
  display: block;
}

<div id="seekbar">
  <progress id="progress" max="100" value="0"></progress>
  <hr/>
  <input id="input" type="range" min="0" max="100" value="0">
  <span id="output"></span>
</div>