Как правильно анимировать элемент ввода диапазона?

Question

У меня есть элемент ввода диапазона HTML (слайдер), значение которого я динамически обновляю с помощью JavaScript. Это отлично работает, пока я не нажму на ползунок, и в этот момент он больше не обновляется. Это ошибка в Firefox или почему это происходит?

<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> 

Answer 1

По моему опыту, когда вы оживляющий элемент управления ввода, и пользователь ничего не делает, что приводит к контролю фокусируясь, анимация останавливается или ведет себя плохо из-за браузера будет убедиться, что вход управления находится где это может видеть пользователь, который часто не совсем там, где вы хотите. Это не относится к FF. У меня возникли аналогичные проблемы в Chrome и IE.

Для решения этой проблемы вы должны отключить управление вводом до начала анимации и включить его после окончания анимации.

Answer 2

step атрибут ввода: диапазон и его нативные функции stepUp()stepDown() может достичь этого.

демо: http://jsbin.com/oWORIdU/1/