输入类型= "range"频繁更改值时的错误

Question

我一次使用input type="range"有两个目的:作为值输入和值输出。把它想象成一个视频搜索栏。

我注意到，如果我以编程方式更新值，则通过鼠标更改范围的值不起作用。

看小提琴。我在Chrome上测试了一下。

http://jsfiddle.net/2jt7d/

我的想法如何解决这个问题是监视mousedown并停止更新，直到鼠标被释放。

是我做错了什么，还是这是控制设计的一个缺陷?

Answer 1

试试这个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();