Перейти к публикации
jakal

Javascript Многократное использование слайдера на странице

Рекомендованные сообщения

jakal

Вечер добрый!

Нужно мне что бы слайдер подключенный к полям input работал сразу с несколькими полями, без конфликтов,

подключается таким образом

<div class="formCost">
   <input id="minCost" class="vubori1" type="text" name="from-cenaibv" placeholder="грн." />
   <input id="maxCost" class="vubori1" type="text" name="to-cenaibv" placeholder="грн." />

   <input id="minCost" class="vubori2" type="text" name="from-cenaib" placeholder="грн." />
   <input id="maxCost" class="vubori2" type="text" name="to-cenaib" placeholder="грн." />
</div>

<div class="sliderCont">
   <div id="slidercen"></div>
</div>

то есть в поля подключается "минимальный" и "максимальный" id (minCost и maxCost)

и сам слайдер <div id="slidercen"></div>

 

Все как бы перевести на class было бы лучше (если это возможно в скрипте) и к (minCost и maxCost) дописывалась нумерация,

что бы они были разные (потому как "19 пар" минимальных и  максимальных значений)

 

Вот сам скрипт

 

 

jQuery(document).ready(function(){


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

jQuery("#slidercen").slider({
	min: 0,
	max: 200,
	values: [0,200],
	range: true,
	step: 5,
	stop: function(event, ui) {
		jQuery("input#minCost").val(jQuery("#slidercen").slider("values",0));
		jQuery("input#maxCost").val(jQuery("#slidercen").slider("values",1));
		
    },
    slide: function(event, ui){
		jQuery("input#minCost").val(jQuery("#slidercen").slider("values",0));
		jQuery("input#maxCost").val(jQuery("#slidercen").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("#slidercen").slider("values",0,value1);	
});

	
jQuery("input#maxCost").change(function(){
		
	var value1=jQuery("input#minCost").val();
	var value2=jQuery("input#maxCost").val();
	
	if (value2 > 200) { value2 = 200; jQuery("input#maxCost").val(200)}

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



// фильтрация ввода в поля
	jQuery('input').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;
	
	});


});

 

 

Или здесь единственный выход, это просто продублировать значения, типа так?

		jQuery("input#minCost").val(jQuery("#slidercen").slider("values",0));
		jQuery("input#maxCost").val(jQuery("#slidercen").slider("values",1));

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

		jQuery("input#minCost1").val(jQuery("#slidercen").slider("values",0));
		jQuery("input#maxCost1").val(jQuery("#slidercen").slider("values",1));

		jQuery("input#minCost2").val(jQuery("#slidercen").slider("values",0));
		jQuery("input#maxCost2").val(jQuery("#slidercen").slider("values",1));

и т.д.

 



Во все слайдеры что нашел:

Первый     Второй      Третий   Четвертый и еще

и у них у всех, только два значения min и max

Никто не встречал универсальный слайдер, что бы можно было разместить на странице хоть 100 штук ?

 

То есть получается для каждой "пары полей" будет свой class или id минимального и максимального значения.

И тогда, если потянуть за слайдер, то значение будет меняться в конкретном поле, а не во всех сразу, так как на данный момент используется общее минимальное и максимальное значение. minCost и  maxCost

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
TheAndrey

Никто не встречал универсальный слайдер, что бы можно было разместить на странице хоть 100 штук ?

jQuery UI чем не подходит?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
jakal

@Andrey,

Так этот что у меня, вроде на основе jQuery UI и делался, я его на xiper нашел плагин jQuery UI Slider

 

сейчас попробую разобраться по оригиналу, ну думаю у этих слайдеров у всех по два значения, как они могут быть универсальны?



А как с этого jQuery UI, вывести два значения по полям

 <script>
$(function() {
$( "#slider" ).slider({
value:100,
min: 0,
max: 500,
step: 50,
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.value );
}
});
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});
</script>
</head>
<body>
<p>
<label for="amount">Donation amount ($50 increments):</label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider"></div>

так что ли

<div id="amount">
      <input type="text" id="min"  />
      <input type="text" id="max"  />
</div>

а дальше что, копировать скрипт и менять id? Хотелось бы универсальное какое то решение, что бы можно было указать на странице "много" таких слайдеров и каждый был независимым, то есть были разные id. Иначе если тянуть за один ползунок, то будут меняться значения не только в двух полях а по всем что есть на странице.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
TheAndrey

Мне хотелось бы увидеть сначала демо. Так разбираться в коде нет никакого желания.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
jakal

 

Мне хотелось бы увидеть сначала демо. Так разбираться в коде нет никакого желания.

На FIDDLE не получилось оформить, так как ошибку выдает.

По этому вот собрал демку скачать

 

Сделал два варианта, через iframe собрал (в этом случаи все три слайдера работают, то есть отображаются), но значения все равно задаются всем полям.

И второй вариант, без iframe все три блока слайдеров в куче (похоже на мой вариант, потому как все делал через табы), и здесь видно что отображается только один слайдер так как наверное конфликт (слишком много id на странице получается)

 

Файлы подписаны ("Через iframe.html" и "Без iframe (все в куче).html")

 

p.s. может все стоит переделать на class (так как много id на странице не рекомендуется) и что то в этом роде

var slidercenElement = $('').attr('id');

что бы каждый блок отличался от предыдущего и не вызывал конфликта, если их на странице больше одного.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
TheAndrey

Ну Вы там заварили кашу...

В общем, делайте уникальный id для каждого сайдера и инициализацию плагина ( $(ЭЛЕМЕНТ).slider() ) тоже.

 

Мне некогда разбираться в вашем творении. Работы полно своей.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
jakal

 

Ну Вы там заварили кашу...

:D Спасибо) Там все жестко!)

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

×
×
  • Создать...