Running a function while changing range slider

Question

I have an on my site.

My function to listen to this change is called like so:

$("#selector").bind("change", function() {
    //do stuff
});

This does what I want it to do but it only happens when I release the range thumbnail I want the function to happen as I move the thumbnail not just when I release it, is this possible?

user_8062659 · Answer

Change event is not necessarily fired for each alteration to an element's value.

MDN Docs

Use input event instead.

Without jQuery you can do

const input = document.querySelector("input");
input.addEventListener("input", function(event) {
  console.log(event.target.value);
});

Or with jquery

$('input').on('input', function(event) {
  console.log(event.target.value);
});

Running a function while changing range slider

1 Answers