Форум

Alex57B · #1 (**permalink**) 21.05.2014, 18:10

Всем привет!

Пишу фильтр по цене(диапазон цен) для сайта.

Код фильтра

<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 чтобы пользователь выбирал именно с помощью бегунка именно из этих значений. Спасибо!

рони · #2 (**permalink**) 21.05.2014, 19:08

Alex57B,

<!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>

Alex57B · #3 (**permalink**) 21.05.2014, 21:33

рони,
Спасибо!
Я решил уже по другому. Из PHP напрямую передал значения.
Смайлик в тему, истинно отражает мои знания в Javascript

Форум

Справочник

Discord чат

Курсы javascript