0

I have a problem with a range input. I use it as a time tracker for an audio tag, and it doesn't reacts as I want.

The value is correctly updated with the onTimeUpdate listener, but the slider thumb doesn't moves.

function onTimeUpdate() {
     var seeker = document.querySelector('#duration');
     var currentTime = Math.floor(player.currentTime);
     seeker.setAttribute("value", currentTime);
}

Chrome rendering

Is it a normal behaviour ? I can't find anything about it. Thank you in advance.

EDIT : "setAttribute" just sets the value of the range input. element.value sets the value AND the position of the cursor to a new value. Thanks to Passerby for the answer !

Joel Beaudon
  • 113
  • 1
  • 7
  • 1
    What's the error you're getting? Can you reproduce the issue somewhere like a js fiddler? – Leo Oct 22 '14 at 08:30
  • I'm not sure why, but try to use `.value=currentTime` instead, that seems to work: http://jsfiddle.net/fep57mav/ – Passerby Oct 22 '14 at 08:37
  • @Passerby : Thanks a lot, it worked ! That's a little weird, but well, it's working now :) – Joel Beaudon Oct 23 '14 at 11:57
  • 1
    this is to do with properties vs attributes - the `value` *property* of the DOM element is what you're trying to change, and it gets its *initial* value from the `value` *attribute* of the HTML element. But dynamically updating the *attribute* does not change the *property*. This is a constant source of confusion - check out this question and its answers for example http://stackoverflow.com/questions/5874652/prop-vs-attr – CupawnTae Oct 23 '14 at 12:50

0 Answers0