Показать сообщение отдельно
  #1 (permalink)  
Старый 29.03.2018, 23:34
Аспирант
Отправить личное сообщение для SERblY Посмотреть профиль Найти все сообщения от SERblY
 
Регистрация: 10.03.2014
Сообщений: 87

Добрые люди помогите с ползунком jquery ui slider
Суть такова, сам как смог прикрутил, тоесть если его двигаешь в инпутах меняется все нормально, поиск по этим пораметрам срабатывает, но вот незадача, если обновить страничку то в инпутах диапазон остаетсся тот который выбирали, а ползунок на стандартные исходные возвращаеться, ребят помогите, как сделать чтобы он тоже оставался
Вот код самого ползунка (скрипта) мб что то лишнее или не так настроил, надеюсь поможете:
<script src="/assets/jquery-ui/jquery-ui.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){


/* слайдер цен */

jQuery("#slider").slider({
	min: 0,
	max: 1000000,
	step: 500,
	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 > 1000000) { value2 = 1000000; jQuery("input.maxCost").val(1000000)}

	if(parseInt(value1) > parseInt(value2)){
		value2 = value1;
		jQuery("input.maxCost").val(value2);
	}
	jQuery("#slider").slider("values",1,value2);
});



// фильтрация ввода в поля
	jQuery('input.maxCost, input.minCost').keypress(function(event){
		var key, keyChar;
		if(!event) var event = window.event;
		
		if (event.keyCode) key = event.keyCode;
		else if(event.which) key = event.which;
	
		if(key==null || key==0 || key==8 || key==13 || key==9 || key==46 || key==37 || key==39 ) return true;
		keyChar=String.fromCharCode(key);
		
		if(!/\d/.test(keyChar))	return false;
	
	});


});



</script>


вот кусок формы где ползунок и инпуты:
<div class="col-md">
				<input style="padding-left:3px; padding-right:3px" class="price_field minCost form-control" name="{%$id%}[over]" type="number" step="500.00" id="" placeholder="Цена, {%$locale.888%}" value=""/>
				</div>
				<div class="col-md">
				<input style="padding-left:3px; padding-right:3px" class="price_field maxCost form-control" name="{%$id%}[less]" type="number" step="500.00" placeholder="Цена, {%$locale.889%}" id="bs_{%$field.id%}" value=""/>
			</div>

вот подгружаеться сам ползунок: прям ниже инпутов сразу (я просто разделил чтобы понятнее было)
<div class="sliderCont">
					<div id="slider"></div>
			</div>


Прикреплю еще скрин на всякий чтобы было яснее! Надеюсь на помощь! Спасибо!
Изображения:
Тип файла: jpg slider.jpg (59.4 Кб, 7 просмотров)
Ответить с цитированием