Как получить диапазон ввода во время изменения с помощью jquery?

Я использую jQuery 2.1 в Chrome 41. Мне нужно получить значения из входного слайдера по мере его изменения; однако, когда я использую событие изменения с jquery, я получаю только значение с ползунка после того, как мышь отпустится, а не во время мускулатуры и перетаскивания.

Этот небольшой пример иллюстрирует проблему:

<input type="range" id="slider" value="0.5" min="0.0" max="1.0" step="0.01" />

<br />

<span id="slider_value">Nothing yet.</span>

<script>
$(document).on('change', '#slider', function() {
    $('#slider_value').html( $(this).val() );
});
</script>

Я думаю, что могу придумать исправление, установив логическое на мыши вверх/вниз события, а затем получая значения на события mousemove. Есть ли более чистое решение?

Ответ 1

В современных браузерах вы можете использовать событие input:

$(document).on('input', '#slider', function() {
    $('#slider_value').html( $(this).val() );
});

Обратите внимание, что IE < 9 не поддерживает его, но он также не поддерживает вход range

Ссылка: Вход MDN - Событие

DEMO

Ответ 2

Вы можете прослушать change/ input:

Обновленный пример

DOM input событие запускается синхронно, когда изменяется значение элемента <input> или <textarea>.

change событие запускается для элементов <input>, <select> и <textarea> при изменении значения элемента совершается пользователем. В отличие от input событие, событие изменения не обязательно запускается для каждого изменения значения элемента.

$(document).on('input change', '#slider', function() {
    $('#slider_value').html( $(this).val() );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="range" id="slider" value="0.5" min="0.0" max="1.0" step="0.01" />
<br />
<span id="slider_value"></span>

Ответ 3

Кроме того, если вы хотите, чтобы текущее значение входного диапазона перемещалось с помощью ползунка, вы можете попробовать это решение.