Slider for Bootstrapを利用することで簡単に、値をスライダーで絞り込むことが出来ます。

利用方法

ファイルをダウンロードして、基本ファイルを読み込みます。

bootstrap-slider.css
bootstrap-slider.js

以下の例ではjQueryを利用するため、別途jQueryファイルも読み込んでおいて下さい。

値を動かすと同時にスライダーの下部に選択した値を表示する例

HTML

<input id="price_range" type="text" data-slider-min="0" data-slider-max="100000" data-slider-step="1000" data-slider-value="[10000,90000]" data-slider-tooltip="hide" />
        <div class="clearfix">
        <span id="price_rangeVal_b" class="pull-left">10,000円</span><span id="price_rangeVal_t" class="pull-right">100,000円</span></div>

JavaScript

$(function(){
      var price_range = $("#price_range").slider();
      $(".slider-track").on('click',function() {
        alert($(price_range).data('value'));
      });

      price_range.on('change', function(event) {
        var a = event.value.newValue;
        var b = event.value.oldValue;

        var changed = !($.inArray(a[0], b) !== -1 &&
        $.inArray(a[1], b) !== -1 &&
        $.inArray(b[0], a) !== -1 &&
        $.inArray(b[1], a) !== -1 &&
        a.length === b.length);

        if (changed) {
          $("#price_rangeVal_b").text(a[0].toLocaleString() + '円');
          $("#price_rangeVal_t").text(a[1].toLocaleString() + '円');
        }
      });
});

スライドすることで下に表示する値を変更するのはすぐにできたのですが、直接クリックで値を変えたときに表示するのに手こずりました。
以下を参考にしました。ありがとうございます。

参考：Bootstrap Slider change value handler