Как в режиме реального времени переместить ползунок ввода типа диапазона, используя JavaScript без обновления страницы?

Question

<input type="range" value="0" min="0" max="100">

Я попробовал следующее, но ползунок не ответил.

var i = 0;
setInterval(function(){
    document.querySelector('input[type=range]').value = i++;
}, 1000);

или невозможно?

Answer 1

отлично работает в Chrome http://jsfiddle.net/gCSFV/

Answer 2

Вы можете сделать это с stepUp и stepDown функциями

document.getElementById("myslider").stepUp(1);
document.getElementById("myslider").stepDown(1);

Рабочая демонстрация: http://jsfiddle.net/dp6cwoom/

Answer 3

Я нашел способ, но не очень хороший: динамически изменять стиль ввода.

var i = 0,
    oRange = document.querySelector('input[type=range]');

setInterval(function(){
    oRage.value = i;
    oRage.style.fontSize = i + 'px';
    i++;
}, 1000);

Answer 4

<input type="range" value="0" min="0" max="100">
<script type="text/javascript"><!--
document.querySelector('input[type=range]').value = 30;
--></script>

Работает нормально в Safari4 (Win).
Убедитесь, что ваш код находится после элемента ввода или вызывается внутри onload или аналогичной функции.

Answer 5

должно работать. <Ч /> Согласно документу MDC на document.querySelector Он поддерживается IE8, FF3.5, Chrome1, Safari3.2 и поэтому является типом ввода = диапазон

Синтаксис

element = document.querySelector(selectors);

Возвращает ноль, если совпадений не найдено; в противном случае возвращается first соответствующий элемент.

Будьте внимательны, так как querySelector возвращает только первый элемент из найденных.
Так что document.querySelector('input[type=range]') не будет таким желанным, как document.querySelector('#myrange')