CODEWITHSUNDEEP
javascriptjquery
Dave
Dave

Reputation: 2601

JQuery range events not firing.

I want to update a value when a user changes the value on the JQuery range control. I have tried to follow the example given here, however it does not work. 

 $(document).ready(function () {
        alert('ready1'); //This fires when the page loads. 

        // Logs the value while the user is moving the slider
        $('.price-min').on('input', getValue);

        function getValue(e) { //This never fires 
            var val = $(e.element).val();
            alert(val); 
        }
    });

HTML:

<div data-role="rangeslider">
    <input type="range" name="price-min" id="price-min" value="200" min="0" max="1000">
    <input type="range" name="price-max" id="price-max" value="800" min="0" max="1000">
</div>

Can someone tell me where I am going wrong?

Upvotes: 1

Views: 45

Answers (2)

David
David

Reputation: 6111

You're using the class selector:

.price-min

Instead of the id selector:

#price-min

You also need to get this instead of e.element:

$(document).ready(function () {
  alert('ready1'); //This fires when the page loads. 

  // Logs the value while the user is moving the slider
  $('#price-min').on('input', getValue);

  function getValue(e) {
    var val = $(this).val();
    alert(val); 
  }
});

Upvotes: 0

Unamata Sanatarai
Unamata Sanatarai

Reputation: 6637

A couple of things with your code.

  1. You are selecting an element by it's class ($('.price-min')), but your ranges have an ID ($('#price-min)').
  2. Listen to change event.

 $(document).ready(function () {
        function getValue(e) { // now this fires on range change event 
            var val = $(this).val();
            console.log(val); 
        }
        // Logs the value while the user is moving the slider
        $('#price-min').on('change', getValue);


    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div data-role="rangeslider">
    <input type="range" name="price-min" id="price-min" value="200" min="0" max="1000">
    <input type="range" name="price-max" id="price-max" value="800" min="0" max="1000">
</div>

Upvotes: 2

Related Questions