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

Question

Я пытаюсь загрузить некоторые данные через ajax при взаимодействии пользователя с изменением ползунка min / max jquery для мобильных устройств.

<label for="filter_price">Preis:</label>
   <div data-role="rangeslider" id="filter_price" style="touch-action: none;">
   <input type="range" name="price_from" id="price_from" min="1" max="2000" value="1" data-popup-enabled="true" class="filter_watch">
    <input type="range" name="price_to" id="price_to" min="1" max="20000" value="20000" data-popup-enabled="true" class="filter_watch">
</div>

js:

$('#price_from').on("change mousemove", function 
 () {
   alert('price filter'); 
})

https://jsfiddle.net/28avj4x5/

При jsfiddle каждое движение мыши вызывает предупреждение, в то время как должен срабатывать только шаг.По моему проекту событие вообще не срабатывает.Я также попытался change.(function... без какого-либо эффекта.

Как я могу вызвать событие при изменении значения и отпускании кнопки (способ, которым вызов ajax срабатывает только тогда, когда пользователь прекращает взаимодействие)?

Answer 1

Событие slidestop, разработанное специально для этой цели:

$(document).on("slidecreate", "#price_from", function(e) {
  $(this).on("slidestop", function() {
    var val = $(this).val();
    // pass val to the ajax call
  });
});

Попробуйте в моем фрагменте кода здесь: https://stackoverflow.com/a/44519349/4845566