Форум

sniffysko · #1 (**permalink**) 24.01.2014, 18:16

Есть слайдер с диапазоном значений 6-30. Мне необходимо сделать так, чтобы слайдеры диапазона не сходились на расстояние 2 единиц.
Написал обработчик перемещения типа такого, но не помогает.

slide: function(event, ui){
	if(ui.value + 1 == ui.values[1]){
		$(this).slider( "values", 0, ui.value - 1 );
		return;
	} 
	if(ui.value - 1 == ui.values[0]){
		$(this).slider( "values", 1, ui.value + 1 );
		return;
	}
	$('#val').text(ui.value);					
},

рони · #2 (**permalink**) 24.01.2014, 18:37

sniffysko,

<!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>
  #slider-range { margin: 10px; width: 500px }
  </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="val1">
<input id="val2">
<div id="slider-range"></div>

<script>
$("#slider-range").slider({
    range: true,
	min: 6,
	max: 30,
	values: [12,20],
	animate: true,
	slide: function( event, ui ) {
	   if(ui.values[1] - ui.values[0] < 2 ) return false;
	   $('#val1').val(ui.values[0]);
       $('#val2').val(ui.values[1]);
		}
	});
 $( "#val1" ).val( $( "#slider-range" ).slider( "values", 0 ));
 $( "#val2" ).val( $( "#slider-range" ).slider( "values", 1 ));


</script>
</body>
</html>

sniffysko · #3 (**permalink**) 25.01.2014, 15:53

Спасибо большое за замечательный ответ.
Код получился проще чем у меня. Я так понял, мое не работало, потому как я делал return, а не return false.

рони · #4 (**permalink**) 25.01.2014, 16:26

Сообщение от sniffysko

Я так понял, мое не работало, потому как я делал return, а не return false.

вы попробуйте свой вариант и return false, ваше условие изначально неверно, поэтому работать как нужно не будет.

Форум

Справочник

Discord чат

Курсы javascript