Форум

Dyonis417 · #1 (**permalink**) 18.11.2013, 16:04

Добрый день!

Помогите, пожалуйста, разобраться.

Есть два слайдера: slider1, slider2.
Для каждого слайдера определено окно, в котором пишется числовое значение бегунка: text1, text2.

Бегунки должны быть взаимозависимыми: сумма числовых значений этих бегунков должна быть равна 100.

Цель: пользователь перемещает бегунок, другой перемещается автоматически, при этом обновляются text1, text2.

Где ошибка?

$("#slider1,#slider2").bind('slidechange', function(event,info) { 		
		$("#slider1,#slider2").not($(this)).slider('value',100 - $(this).slider('value'));
		
		$("#text1").attr('value',$("#slider1").slider('value'));
		$("#text2").attr('value',$("#slider2").slider('value'));

		$("#text1").trigger();
		$("#text2").trigger();		
});

Спасибо!

С уважением,
Денис

рони · #2 (**permalink**) 18.11.2013, 17:45

Dyonis417,
бесконечная рекурсия не все браузеры выдержат -- в slidechange можно только имитацию сделать для второго ползунка но никак не устанавливать значение иначе замкнутая цепочка

Dyonis417 · #3 (**permalink**) 18.11.2013, 17:53

рони,
а если кодом, то как эта имитация выглядит?
Неужели нет решения?

рони · #4 (**permalink**) 18.11.2013, 18:14

Dyonis417, можно и без stop если ненужно запрашивать текущее установленное значение ползунка - и то если изменять значение непрограммно: передвигая рукоятку ползунка

<!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/south-street/jquery-ui.css">
  <style>
  #slider0, #slider1 { margin: 10px; width: 300px; }
	</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 id="text0">
<div id="slider0"></div>
<input id="text1">
<div id="slider1"></div>
<script>
 var sliders = $( "#slider0, #slider1" );
sliders.slider(
   {
   stop: function(event, ui) {
   var i =  sliders.index(this);
   $("#text"+i).val(ui.value);
   i ^= 1;
   $("#slider"+i).slider("value", 100-ui.value);
    },
   change: function( event, ui ) {
   var i =  sliders.index(this);
   $("#text"+i).val(ui.value);
   i ^= 1;
   $("#slider"+i+ " .ui-slider-handle").css("left", (100-ui.value)+"%");
   $("#text"+i).val(100 - ui.value);
     },
   slide: function( event, ui ) {
   var i =  sliders.index(this);
   $("#text"+i).val(ui.value);
   i ^= 1;
   $("#slider"+i+ " .ui-slider-handle").css("left", (100-ui.value)+"%");
   $("#text"+i).val(100 - ui.value);
     }

   }
);

$( "#slider0" ).slider("value", 50)
</script>
</body>
</html>

рони · #5 (**permalink**) 18.11.2013, 18:17

Dyonis417,
для понимания 32 строку нельзя вставлять ни в change ни в slide

Dyonis417 · #6 (**permalink**) 18.11.2013, 18:20

рони,
Спасибо! То что надо! Понял, что был не прав.

С уважением,
Денис

Клавер · #7 (**permalink**) 11.08.2016, 16:39

Может кто-нибудь подсказать, как сделать в такой зависимости 4, а не 2 слайдера? Буду очень благодарен.

рони · #8 (**permalink**) 11.08.2016, 17:02

Клавер,
какая проблема из 100 вычесть значение ползунка и остаток распределить по остальным ползункам?

Клавер · #9 (**permalink**) 11.08.2016, 17:08

Проблема в реализации из-за недостатка опыта и кривых мозгов

рони · #10 (**permalink**) 11.08.2016, 17:23

Клавер,
опишите зависимость ваших ползунков

Форум

Справочник

Discord чат

Курсы javascript