title: Set Max value dynamically to the slider
body: <p>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.</p>
  
  <p>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)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//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 &gt; 0) {
              data.forEach(function (elem) {
                  $('#max').val(elem.MaxPrice);  //set the Maximum price in the hidden input          
                  $('#listing_annonce_int').append('&lt;div id="title"&gt;'+ elem.title +'&lt;/div&gt;&lt;div id="price"&gt;'+ elem.price +'&lt;/div&gt;');
                  })
              }
          }
      })
    
  });
  
  /**************************************/
  
  function showProducts(minPrice, maxPrice) {
    $("#listing_annonce_int .listing_annonce_view").hide().filter(function() {
      var price = parseInt($(this).data("price"), 10);
      return price &gt;= minPrice &amp;&amp; price &lt;= 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);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;select id="category" name="category"&gt;
  &lt;option value='1'&gt;cat 1&lt;/option&gt;
  &lt;option value='2'&gt;cat 2&lt;/option&gt;
  &lt;/select&gt;
  
      &lt;input type="text" id="amount"/&gt;
      &lt;input type="text" id="max"/&gt;
      &lt;div id="slider-range"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>