输入类型=“范围”错误时经常更改值

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();