Sliders

jQuery UI slider: range

(Documentation)

HTML
<p> 
<label for="amount">Price range</label> 
<input type="text" id="amount"/> 
</p> 
<div id="slider-range"></div>
JS
$("#slider-range").slider({
  range: true,
  min: 0,
  max: 500,
  values: [75, 300],
  slide: function (event, ui) {
    $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
  }
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + 
$("#slider-range").slider("values", 1));

jQuery UI slider: range with fixed minimum

(Documentation)

HTML
<p> 
  <label for="amount">Maximum price:</label> 
  <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" /> 
</p> 
<div id="slider-range-min"></div>;
JS
$(function () {
  $("#slider-range-min").slider({
    range: "min",
    value: 37,
    min: 1,
    max: 700,
    slide: function (event, ui) {
      $("#amount2").val("$" + ui.value);
    }
  });
  $("#amount2").val("$" + $("#slider-range-min").slider("value"));
});