Слайдер выбора 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>
Комментарии (1) | ||
|