Помогите с JQ слайдером
Всем привет!
Пишу фильтр по цене(диапазон цен) для сайта. Код фильтра
<div class="box">
<div class="box-heading">Диапазон цен</div>
<form class="fromtofilter" action="#" method="GET">
<div class="formCost">
<label for="minCost">от</label><input type="text" id="minCost" value="0"/>
<label for="maxCost">до</label><input type="text" id="maxCost" value="1000"/>
</div>
<div class="sliderCont">
<div id="slider"></div>
</div>
</form>
</div>
Использую библиотеку jquery.ui-slider.js и вот такой скрипт взял с одного сайта
jQuery(document).ready(function(){
/* слайдер цен */
jQuery("#slider").slider({
min: 0,
max: 1000,
values: [0,1000],
range: true,
stop: function(event, ui) {
jQuery("input#minCost").val(jQuery("#slider").slider("values",0));
jQuery("input#maxCost").val(jQuery("#slider").slider("values",1));
},
slide: function(event, ui){
jQuery("input#minCost").val(jQuery("#slider").slider("values",0));
jQuery("input#maxCost").val(jQuery("#slider").slider("values",1));
}
});
jQuery("input#minCost").change(function(){
var value1=jQuery("input#minCost").val();
var value2=jQuery("input#maxCost").val();
if(parseInt(value1) > parseInt(value2)){
value1 = value2;
jQuery("input#minCost").val(value1);
}
jQuery("#slider").slider("values",0,value1);
});
jQuery("input#maxCost").change(function(){
var value1=jQuery("input#minCost").val();
var value2=jQuery("input#maxCost").val();
if (value2 > 1000) { value2 = 1000; jQuery("input#maxCost").val(1000)}
if(parseInt(value1) > parseInt(value2)){
value2 = value1;
jQuery("input#maxCost").val(value2);
}
jQuery("#slider").slider("values",1,value2);
});
});
Сейчас минимальная цена в инпуте minCost - 0, в maxCost - 1000 Мне нужно чтобы эти значения брались из инпутов которые возвращаются PHP скриптом при переходе в категорию товаров. <input type="hidden" name="minCostCat" value="500"> <input type="hidden" name="maxCostCat" value="15790"> Собственно просьба, помогите подставить эти значения в инпуты minCost и maxCost чтобы пользователь выбирал именно с помощью бегунка именно из этих значений. Спасибо! |
Alex57B,
:cray:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slider demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css">
<style>
#slider { margin: 10px;width : 500px; height: 8px }
.ui-slider-handle{border-radius:50%; position: relative; font-size: 14px; display: block; }
.ui-slider-horizontal .ui-slider-handle{top:-0.4em}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<input type="hidden" name="minCostCat" value="500">
<input type="hidden" name="maxCostCat" value="15790">
<div class="box">
<div class="box-heading">Диапазон цен</div>
<form class="fromtofilter" action="#" method="GET">
<div class="formCost">
<label for="minCost">от</label><input type="text" id="minCost" />
<label for="maxCost">до</label><input type="text" id="maxCost" />
</div>
<div class="sliderCont">
<div id="slider"></div>
</div>
</form>
</div>
<script>
jQuery(document).ready(function(){
var min_max = [+jQuery("[name='minCostCat']").val(),+jQuery("[name='maxCostCat']").val()]
/* слайдер цен */
jQuery("#slider").slider({
min: min_max[0],
max: min_max[1],
values: min_max,
range: true,
change: function(event, ui) {
jQuery("input#minCost").val(jQuery("#slider").slider("values",0));
jQuery("input#maxCost").val(jQuery("#slider").slider("values",1));
},
slide: function(event, ui){
jQuery("input#minCost").val(jQuery("#slider").slider("values",0));
jQuery("input#maxCost").val(jQuery("#slider").slider("values",1));
}
});
$("#slider").slider( "option", "values", min_max );
jQuery("input#minCost").change(function(){
var value1=+jQuery("input#minCost").val()||min_max[0];
var value2=+jQuery("input#maxCost").val()||min_max[1];
if(value1 > value2){value1 = value2};
if(value1 < min_max[0]){value1 = min_max[0]};
jQuery("input#minCost").val(value1);
jQuery("#slider").slider("values",0,value1);
});
jQuery("input#maxCost").change(function(){
var value1=+jQuery("input#minCost").val()||min_max[0];
var value2=+jQuery("input#maxCost").val()||min_max[1];
if (value2 > min_max[1]) { value2 = min_max[1]};
if(value1 > value2){value2 = value1;}
jQuery("input#maxCost").val(value2);
jQuery("#slider").slider("values",1,value2);
});
});
</script>
</body>
</html>
|
рони,
Спасибо! Я решил уже по другому. Из PHP напрямую передал значения. Смайлик в тему, истинно отражает мои знания в Javascript :) |
| Часовой пояс GMT +3, время: 06:09. |