JQuery Range Input Listener

Question

Hey having a little trouble jquery and the hmtl5 range. I'm try to get the values as they changed but the event listener is not capturing it. Currently my code is:

HTML

html += '<li>Apply Credits: <input type="range"  min="0" max="'+credits+'" name="discount_credits" id="discount_credits" /> <span>'+credits+'</span></li>'

And the JS is:

$('#discount_credits').mousewheel( function() { 
        alert('it changed!'); 
        alert('new value = ' + $(this).val()); 
    });

I've also tried

$('#discount_credits').change( function() { 
            alert('it changed!'); 
            alert('new value = ' + $(this).val()); 
        });

Neither seem to work. Am I doing something wrong?

Is the event handler added after the range input is injected into the DOM? — Andreas
– Andreas, Commented May 6, 2012 at 19:36

bcr · Accepted Answer · 2015-03-13 18:32:28Z

49

$('input[type=range]').on('input', function () {
    $(this).trigger('change');
});

This fires the change event on every input event.

answered Mar 13, 2015 at 18:32

bcr

3,82120 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Derek 朕會功夫 · Accepted Answer · 2014-04-11 07:34:24Z

19

Does not seem to have any problem on HTML5 <input type="range"> using change.

See: http://jsfiddle.net/DerekL/BaEar/33/

edited Apr 11, 2014 at 7:34

answered May 6, 2012 at 20:01

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

3 Comments

Caroline Schnapp Over a year ago

It only updates the span value when I release the slider button, on keyup. In Google Chrome Version 34.0.1847.116 using jQuery 2.0.3.

Willi Mentzel Over a year ago

may not be big of a deal, but it also triggers when just hovering the slider with the mouse. otherwise great solution!

Luke W Over a year ago

in Chrome, at least, attaching handler to the 'input' event gets triggered even when hovering. for the 'change' event, this is not the case. so i opted for 'change', as hovering is not considered input in my case. the hovering effect could be problematic if your handler triggers dom manipulation or ajax calls.

Mahshid Zeinaly · Accepted Answer · 2013-11-18 17:54:46Z

I assume your span has an id: <span id="slidernumber">...</span> Lets also assume that you have a few sliders, and you want to see a text change if any of them were moved:

<li>
Apply Credits1: 
<input type="range" min="0" max="100" 
name="discount_credits1" id="discount_credits" 
/>
</li>

<li>
Apply Credits2: 
<input type="range" min="0" max="100" 
name="discount_credits2" id="discount_credits" 
/>
</li>

<span id="slidernumber">50</span>

Try this:

$(document).ready(function(){
  $("[type=range]").change(function(){
    var newval=$(this).val();
    $("#slidernumber").text(newval);
  });
});

http://jsfiddle.net/MahshidZeinaly/CgQ5c/

Now lets assume that you have a few sliders, but you want to see a text change if a particular one of them were moved. (I assume it because the range input is inside li tag, and you gave it a name):

<li>
Apply Credits1: 
<input type="range" min="0" max="100" 
name="discount_credits1" id="discount_credits" 
/>
<span id="slidernumber">50</span>
</li>

<li>
Apply Credits2: 
<input type="range" min="0" max="100" 
name="discount_credits2" id="discount_credits" 
/>
<span id="slidernumber">50</span>
</li>

Try this:

$(document).ready(function(){
  $("[type=range]").change(function(){
    var newv=$(this).val();
    $(this).next().text(newv);
  });
});

http://jsfiddle.net/MahshidZeinaly/2pe7P/1/

Chase · Accepted Answer · 2014-04-11 02:43:44Z

4

The on change event seems to be working correctly for me: http://jsfiddle.net/zV3xD/7/

<input type="range"  min="0" max="100" name="discount_credits" id="discount_credits" />

<span id="newValue" value="0">0</span>

$('#discount_credits').change( function() {
    var newValue = this.value;        
    $('#newValue').html(newValue);
});

Or you can try something like this:

<form oninput="result.value=parseInt(a.value)">
    <input type="range" name="a" value="50" /> =
    <output name="result">0</output>
</form>

Using the output example here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output

edited Apr 11, 2014 at 2:43

answered May 6, 2012 at 19:55

Chase

29.6k1 gold badge52 silver badges49 bronze badges

2 Comments

Caroline Schnapp Over a year ago

It only updates the #newValue when I release the slider button, on keyup. In Google Chrome Version 34.0.1847.116 using jQuery 2.0.3.

Chase Over a year ago

Hi @CarolineSchnapp - I've updated my example to show another way of approaching this issue. If it isn't sufficient, please let me know and we can figure out something that will.

Naelson Gonçalves Saraiva · Accepted Answer · 2018-12-04 20:32:42Z

-1

Several test and bug fixed!

$('input[name=form_range]').change('mousestop',function () {

});

edited Dec 4, 2018 at 20:32

answered Dec 4, 2018 at 20:17

Naelson Gonçalves Saraiva

393 bronze badges

1 Comment

dearsina Over a year ago

This doesn't solve OPs problem (of capturing the new value while the user is still holding the mouse button pressed down): jsfiddle.net/zV3xD/7

Collectives™ on Stack Overflow

JQuery Range Input Listener

5 Answers 5

Comments

3 Comments

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related