title: jQueryUI Slider - Getting the initial slider values
body: <p>I implemented the jQueryUI slider and want to display the min &amp; max slider values in 2 different divs. The values in the div will update as the user adjusts the slider. The divs will also show the initial values of the slider.</p>
  
  <p><strong>Problem:</strong> The div shows <code>[object object]</code> as the intial values, but shows the correct updated values as the slider is adjusted by the user. I need some help to get the initial values displayed.</p>
  
  <p><strong>jQuery Code:</strong></p>
  
  <pre><code>$("#filter_submenu_rent").slider({
      range: true,
      min: 0,
      max: 10000,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
          $( "#rent_min" ).html( "Min: $" + ui.values[ 0 ] );
          $( "#rent_max" ).html( "Max: $" + ui.values[ 1 ] );
      }
  })
  $( "#rent_min" ).html( "Min: $" + $( "#slider_rent" ).slider( "values", 0 ));
  $( "#rent_max" ).html( "Max: $" + $( "#slider_rent" ).slider( "values", 1 ));
  </code></pre>
  
  <p><strong>HTML Code</strong></p>
  
  <pre><code>&lt;div id="filter_submenu_rent"&gt;
              &lt;div id="rent_min"&gt;&lt;/div&gt;
              &lt;div id="slider_rent"&gt;&lt;/div&gt;
              &lt;div id="rent_max"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery Code (Another Attempt)</strong>
  <em>Nothing appears in the 2 divs initially when this is used</em></p>
  
  <pre><code>$("#filter_submenu_rent").slider({
      range: true,
      min: 0,
      max: 10000,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
          $( "#rent_min" ).html( "Min: $" + ui.values[ 0 ] );
          $( "#rent_max" ).html( "Max: $" + ui.values[ 1 ] );
      },
      create: function(event, ui) {
          $( "#rent_min" ).html( "Min: $" + ui.values[ 0 ] );
          $( "#rent_max" ).html( "Max: $" + ui.values[ 1 ] );
      }
  })
  </code></pre>