jquery ui の slider で 簡単に数値の範囲指定をさせる

jquery ui の sliderを使ってみた。
商品検索の価格範囲指定などのUIに使えそう

サンプルコードは以下

<div id="slider"></div>
<script type="text/javascript">
$(document).ready(function() {
  $("#slider").slider({
    // アニメーションをON
    animate:true,
    // レンジ指定のsliderを表示したい時はtrue。
    // レンジ指定の場合は取手が2つ
    // デフォルトはfalse(取手1つ)
    range:true,
    // sliderの最小値
    min:10,
    // sliderの最大値
    max:30,
    // 最初に取手を配置する値
    values:[15, 20],
    // sliderが変更された時のイベントを登録
    change:function(event,ui){
      // 変更後のスライドの値を知りたいときは以下の用に書く。レンジ指定の場合、戻り値は配列
      var values = $('#slider').slider('option', 'values');
      // values配列、要素0が最小値、要素1が最大値
      alert('changed:min='+values[0]+' ,max='+values[1]);
    }
  });
});
</script>

サンプルは以下。