Я использую 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. Есть ли более чистое решение?
В современных браузерах вы можете использовать событие input:
$(document).on('input', '#slider', function() {
$('#slider_value').html( $(this).val() );
});
Обратите внимание, что IE < 9 не поддерживает его, но он также не поддерживает вход range
Ссылка: Вход MDN - Событие
Вы можете прослушать 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>Кроме того, если вы хотите, чтобы текущее значение входного диапазона перемещалось с помощью ползунка, вы можете попробовать это решение.