Running a function while changing range slider

Question

I have an <input type="range"> 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?

Answer 1

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);
});

<input type="range" />

Or with jquery

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

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<input type="range" />