CODEWITHSUNDEEP
javascriptjquery
Paddy Hallihan
Paddy Hallihan

Reputation: 1686

Running a function while changing range slider

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?

Upvotes: 3

Views: 621

Answers (1)

bertdida
bertdida

Reputation: 5288

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

Upvotes: 4

Related Questions