Javascript 如何正确设置范围输入元素的动画？

我有一个HTML范围输入元素（slider），我使用JavaScript动态更新它的值。在我单击滑块之前，它工作正常，此时不再更新。这是Firefox中的一个bug还是为什么会发生这种情况

<script src="http://d3js.org/d3.v3.js"></script>
<script>
var timeValue = 0;
var timeSlider = d3.select("body").append("input")
.attr("type", "range")
.attr("min", 0)
.attr("max", 10000)
.style("width", "500px");

window.setInterval(update, 20);

function update() {
    timeValue += 20;
    timeSlider.attr("value", timeValue);
}
</script>

var-timeValue=0；
var timeSlider=d3.选择（“正文”）.追加（“输入”）
.attr（“类型”、“范围”）
.attr（“最小”，0）
.attr（“最大”，10000）
.样式（“宽度”、“500px”）；
设置间隔（更新，20）；
函数更新（）{
时间值+=20；
timeSlider.attr（“值”，timeValue）；
}

根据我的经验，当您为输入控件设置动画，并且用户执行任何导致控件聚焦的操作时，由于浏览器将确保输入控件位于用户可以看到的位置，而这通常不是您想要的位置，动画将停止或出现错误行为。这并不排除FF在Chrome和IE中会遇到类似的问题

---

要解决此问题，必须在动画开始前禁用输入控件，并在动画结束后再次启用它。

step

input:range的属性及其本机函数

steppup（）

steppdown（）

可以实现此目的

---

演示：

您能发布一段代码来说明功能吗？这在其他浏览器中也适用？不，在Chrome中更糟糕。也许滑块不应该设置动画。