html - onChange event for HTML5 range

Question

Currently the onChange event on my range inputs is firing at each step.

Is there a way to stop this event from firing until the user has let go of the slider?

I'm using the range to create a search query. I want to be able to run the search every time the form is changed but issuing a search request at each step of the slider's movement is too much.

---

Here's the code as it stands:

HTML:

<div id="page">
    <p>Currently viewing page <span>1</span>.</p>
    <input class="slider" type="range" min="1" max="100" step="1" value="1" name="page" />
</div>

JavaScript:

$(".slider").change(function() {
    $("#query").text($("form").serialize());
});

Does that help?

Answer 1

Use for final selected value:

 $(".slider").on("change", function(){console.log(this.value)});

Use to get incremental value as sliding:

$(".slider").on("input", function(){console.log(this.value)});