Слайдер выбора JQUERY UI

Для начала скачаем все  необходимые файлы с сайта jqueryui.com

Из виджетов нам понадобится только slider

Пример использования  слайдера для выбора диапазона цен :

html

<input name="price_s" type="text"  value="" /> - <input name="price_f" type="text"  value="" /> Руб.

<div id="buy_price"></div>

javascript

 <script type="text/javascript">
$(document).ready(function() {

        $("#buy_price").slider({
            range: true,
            min: 500, // минимальное значение цены
            max: 120000, // максимальное значение цены
            step: 1500, // шаг слайдера
            values: [ 1500, 100000],  // начальные значения - позиции ползунков на шкале

                        slide: function( event, ui ) {
                                $( "input[name=price_s]" ).val(  ui.values[ 0 ] ); // выводим  значение от
                                $( "input[name=price_f]" ).val(  ui.values[ 1 ] ); // выводим  значение до
            },
            stop: function(event, ui) { show(); } // выполняем действие  после остановки ползунка, в нашем случае функция show
        });
       
});
</script>