CODEWITHSUNDEEP
jqueryhtmlinputrange
Matthew
Matthew

Reputation: 2246

Instantly Update Range Value with jQuery

I have a range, and I want to update the span that displays its numeral value instantly. The code that I have works, but only displays numeral value when you stop holding the left click down.

Here's what I have:

$("#length").change(function(){  // when range is altered, execute function
    len = $("#length").val(); // set variable "len" to the numeral value of range
    $("#password-length").html(len); // set "len" (numeral value) to a span
});

Fiddle.

Upvotes: 3

Views: 575

Answers (2)

Nick Mehrdad Babaki
Nick Mehrdad Babaki

Reputation: 12485

You can also change it to mousemove

$("#length").mousemove(function(){
        len = $("#length").val();
    $("#password-length").html(len);
});

Upvotes: 1

dsgriffin
dsgriffin

Reputation: 68576

You could check for both the input and change events to achieve this.

In this case: 

$("#length").on('input change', function(){
   $("#password-length").html(this.value);
});

jsFiddle here

Upvotes: 2

Related Questions