title: How do I dynamically change min,max values for jquery ui slider?
body: <p>So I have a page with a jquery ui slider on it initialized with the following:</p>
  
  <pre><code>var min = $("#attrInformation").data("lowest_price"),
  max = $("#attrInformation").data("highest_price");
  
      $( "#slider-range" ).slider({
          range: true,
          min: min,
          max: max,
          values: [ min, max ],
          slide: function( event, ui ) {
              var start = ui.values[0],
              end = ui.values[1];
  
              $("#startPrice").text(start);
              $("#endPrice").text(end);
          },
          stop: function(event,ui){
              var start = ui.values[0],
              end = ui.values[1];
  
              refineObject.price_min = start;
              refineObject.price_max = end;
  
              refineResults(refineObject);
          }
      });
  </code></pre>
  
  <p>and i want to be able to change the min, max, AND the value for which the two handles are on based on the results of an ajax call. so i've tried something like this:</p>
  
  <pre><code>    $.get("ajax.php",options,function(data){
      $('.middle_container').html(data);          
  
      $('#slider-range').slider( "option", "min", $('.middle_container').find('.start_price').val() );
      $('#slider-range').slider( "option", "max", $('.middle_container').find('.end_price').val() );
      $('#slider-range').slider("value", $('#slider-range').slider("value"));
  
          });
  </code></pre>
  
  <p>where my min and max are contained in two hidden divs with the class <code>start_price</code> and <code>end_price</code>.  this currently does not work, it doesn't update the max price and the slider's right handle appears over on the left out of position.  any suggestions on how to make this work? i'm using php for the backend.  the start_price and end_price code is working and correct.</p>