input type="range" bug when changing the value too often

Question

I'm using input type="range" for two purposes at a time: as value input and value output. Imagine this as a video seekbar.

I've noticed that changing the range's value by mouse does not work if I update the value programmatically.

See the fiddle. I test it on Chrome.

http://jsfiddle.net/2jt7d/

My idea how to solve this issue is to monitor mousedown and stop updating until the mouse is released.

Am I doing something wrong or this is rather a flaw in control's design?

Answer 1

Try this http://jsfiddle.net/aamir/2jt7d/3/

var i = 0,
    max = 1000,
    timer,
    range = document.getElementById('range');

function iteration() {
    range.value = i;
    if (i < max) {
        i++;
        timer = setTimeout(iteration, 100);
    }
}

range.max = max;

range.onmousedown = function () {
    clearTimeout(timer);
}

range.onmouseup = function () {
    i = this.value;
    iteration();
}

iteration();