How to listen to input type range with jquery?

I am trying to load some data via ajax upon user interaction from changing a jquery mobile range min/max slider.

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

On jsfiddle every mouse move triggers the alert, while only the chagne should trigger. On my project the event does not fire at all. I also tried change.(function... without any effect.

How can I trigger the event upon changing value and releasing the button (the way the ajax call only fires when the user stops interacting)?

Solution

The slidestop event twas designed specifically for this purpose:

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

Try it out in my code snippet here: https://stackoverflow.com/a/44519349/4845566