CODEWITHSUNDEEP
javascriptjquery
Eagle
Eagle

Reputation: 81

Set Max value dynamically to the slider

I'm trying to set max value dynamically in my slider, the max value is get from an input #max, I tried $("#max").val to put this code in the max variable but it isn't working.

edited: When user select one category, I display all the product from this category, and with the ajax part I set the value to the input #max (maximum price)

//When user select one category, I display all the product from this category, and in my ajax  part I
$('#category').change(function () {

 $.ajax({
    url: 'ajax.php',
    data: {category: category},
    dataType: 'json',
    cache: false,
    type: "GET",
    success: function(data){     
        if (data.length > 0) {
            data.forEach(function (elem) {
                $('#max').val(elem.MaxPrice);  //set the Maximum price in the hidden input          
                $('#listing_annonce_int').append('<div id="title">'+ elem.title +'</div><div id="price">'+ elem.price +'</div>');
                })
            }
        }
    })
  
});

/**************************************/

function showProducts(minPrice, maxPrice) {
  $("#listing_annonce_int .listing_annonce_view").hide().filter(function() {
    var price = parseInt($(this).data("price"), 10);
    return price >= minPrice && price <= maxPrice;
  }).show();
}

$(function() {
  var options = {
    range: true,
    min: 0,
    max: 20000,
    values: [0, 5000],
    slide: function(event, ui) {
      var min = ui.values[0],
          max = ui.values[1];              

      $("#amount").val(min + " € - " + max + " €");
      showProducts(min, max);
    }
  }, min, max;

  $("#slider-range").slider(options);

  min = $("#slider-range").slider("values", 0);
  max = $("#slider-range").slider("values", 1);

  $("#amount").val( min + " €- " + max + " €");
  showProducts(min, max);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<select id="category" name="category">
<option value='1'>cat 1</option>
<option value='2'>cat 2</option>
</select>

    <input type="text" id="amount"/>
    <input type="text" id="max"/>
    <div id="slider-range"></div>

Upvotes: 2

Views: 10225

Answers (1)

Michael Walter
Michael Walter

Reputation: 1477

It's because you don't do anything to set the new value. You need to add this listener: 

$('#max').keyup(function(){
    $( "#slider-range" ).slider( "option", "max", parseInt($(this).val()) );
});

You should also check the documentary of the function: http://api.jqueryui.com/slider/#option-max

Working fiddle: https://jsfiddle.net/4p2mL282/1/

UPDATED ANSWER

Do you really need the input box? The easiest way is to change it dirctly. replace

$('#max').val(elem.MaxPrice);

with

$( "#slider-range" ).slider( "option", "max", parseInt(elem.MaxPrice));

in the AJAX call of the change()-function

If you need the input box, I can explain why your current version is not working. When you change the value of of an element which has a onchange-listener with .val(), you always have to fire the event by your self.

i.e. for your example in the comments

$('#max').val('1000').change();

You can always force the event by calling it functions without passing any parameters.

But this is still not your correct problem. You problem is, that you are setting the value of the #max field in the change-function of #category but you don't have any change-listener for #max.

I highly advise you to use the easy way which I provided the updated answer first.

Upvotes: 3

Related Questions