title: jQuery UI Slider: move the value along (with) the handle
body: <p>I used the jQuery UI slider component in my page to set a <strong>range</strong> of prices.
  I can also use their ui.values[] to set and show the new values in other divs.</p>
  
  <p>How can I make to <strong><em>see the new value under the handle</em></strong>. I.e. if I moved the
  handle to $100, I want to set the "$100" text right under that handle.</p>
  
  <p>BTW, I use the range version - to set a range of prices, so I got TWO handles on my slider (min &amp; max).</p>
  
  <pre><code>var minPriceRange=100;
  var maxPriceRange=500;
  $( "#priceRangeSlider" ).slider({
          range: true,
          min: minPriceRange,
          max: maxPriceRange,
          step: 10,
          values: [ minPriceRange, maxPriceRange ],
          slide: function( event, ui ) {
              ("#fromRangeText").text("$" + ui.values[ 0 ]);
              $("#toRangeText").text("$" + ui.values[ 1 ]);
          }
  });
  </code></pre>