slider slidechange
Добрый день!
Помогите, пожалуйста, разобраться. Есть два слайдера: 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();
});
Спасибо! С уважением, Денис |
Dyonis417,
бесконечная рекурсия не все браузеры выдержат -- в slidechange можно только имитацию сделать для второго ползунка но никак не устанавливать значение иначе замкнутая цепочка |
рони,
а если кодом, то как эта имитация выглядит? Неужели нет решения? |
зависимые ползунки
Dyonis417, можно и без stop если ненужно запрашивать текущее установленное значение ползунка - и то если изменять значение непрограммно: передвигая рукоятку ползунка
:cray:
<!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>
|
Dyonis417,
для понимания 32 строку нельзя вставлять ни в change ни в slide |
рони,
Спасибо! То что надо! Понял, что был не прав. С уважением, Денис |
Может кто-нибудь подсказать, как сделать в такой зависимости 4, а не 2 слайдера? Буду очень благодарен.
|
Клавер,
какая проблема из 100 вычесть значение ползунка и остаток распределить по остальным ползункам? |
Проблема в реализации из-за недостатка опыта и кривых мозгов:D
|
Клавер,
опишите зависимость ваших ползунков |
Есть 4 бегунка, оформил их так, но теперь не могу понять, как установить связь. Общая сумма всех 4х слайдеров не должна превышать 100 %, т.е. значения могут быть любые, больше-меньше не важно, главное чтоб в сумме всегда оставалось 100. Код сырой, там еще расчеты будут с использованием значений слайдеров.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/south-street/jquery-ui.css">
<style>
#slider0, #slider1, #slider2, #slider3 { 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>
<script>
jQuery(function() {
$("#slider0").slider({
range: "min",
value: 50,
min: 0,
max: 100,
slide: function(event, ui) {
$('#amount0').val(ui.value).trigger("change");
}
});
$("#amount0").val($("#slider0").slider("value"));
$("#slider1").slider({
range: "min",
value: 50,
min: 0,
max: 100,
slide: function(event, ui) {
$('#amount1').val(ui.value).trigger("change");
}
});
$("#amount1").val($("#slider1").slider("value"));
$("#slider2").slider({
range: "min",
value: 50,
min: 0,
max: 100,
slide: function(event, ui) {
$('#amount2').val(ui.value).trigger("change");
}
});
$("#amount2").val($("#slider2").slider("value"));
$("#slider3").slider({
range: "min",
value: 50,
min: 0,
max: 100,
slide: function(event, ui) {
$('#amount3').val(ui.value).trigger("change");
}
});
$("#amount3").val($("#slider3").slider("value"));
});
</script>
</script>
<body>
<input id="amount0">
<div id="slider0"></div>
<input id="amount1">
<div id="slider1"></div>
<input id="amount2">
<div id="slider2"></div>
<input id="amount3">
<div id="slider3"></div>
</body>
|
slider jquery-ui 4 обратнозависимых ползунка
Клавер,
код применим для любого количества ползунков и общей суммы.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.slider{
width: 300px;
margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/south-street/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
var arr = [25, 25, 25, 25],
k = 0;
$(".opt").each(function(i, el) {
var d = arr[i],
am = $(".amount", el),
sl = $(".slider", el);
sl.slider({
min: 0,
max: 100,
step: 1,
slide: function(event, ui) {
am.val(ui.value);
var n = arr[i] - ui.value;
arr[i] = +ui.value;
for (var a = Math.abs(n); a; k = ++k % arr.length) {
if (k != i && arr[k] < 100 && n > 0) {
arr[k] += 1;
a--
}
if (k != i && arr[k] > 0 && n < 0) {
arr[k] -= 1;
a--
}
}
arr.forEach(function(d, j) {
if (j != i) $(".slider").eq(j).slider("option", "value", d)
})
},
change: function(event, ui) {
am.val(ui.value)
}
});
sl.slider("option", "value", d)
})
});
</script>
</head>
<body>
<div class="opt">
<div class="slider"></div>
<input type="text" class="amount" readonly>
</div>
<div class="opt">
<div class="slider"></div>
<input type="text" class="amount" readonly>
</div>
<div class="opt">
<div class="slider"></div>
<input type="text" class="amount" readonly>
</div>
<div class="opt">
<div class="slider"></div>
<input type="text" class="amount" readonly>
</div>
</body>
</html>
|
Спасибо, очень помогли
|
рони, помоги.
хочу использовать Ion.RangeSlider, но может есть что то более подходящее ко мне. есть три слайдера с диапазонами(двумя ползунками): 1. 30, 40, 50, 60, 70, 80, 90, 100 2. 1, 2, 3, 4 3. 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16 как сделать зависимости? например: если выбран диапазон в первом слайдере с 30 по 60, то во втором автоматически выбирается диапазон с 1 по 2. А если выбрать во втором значения с 2 по 3, то в первом измениться на с 40 по 90. |
makcim_tol,
не понимаю логики |
Есть параметры квартиры: площадь(1), кол-во комнат(2), этаж(3).
Т.е. если выбрать площадь от 30 до 60, то это могут быть либо однокомнатные либо двухкомнатные. Ну а если выбрать например кол-во комнат с 2 по 4, то площадь соответственно уже будет от 50 до 100. А если выбрать только кол-во комнат 3. то площадь выберется от 60 до 90. Надеюсь понятнее объяснил. |
Если выбрано кол-во комнат 3 и площадь квартир от 60 до 90, то ни что не должно мешать пользователю изменить площадь на от 80 до 90.
Но если пользователь изменить например на от 80 до 100, то и кол-во комнат измениться на с 3 по 4. |
makcim_tol,
не предсталяю как это можно сделать, не могу помочь. |
а что if уже отменили?
|
j0hnik,
:-? |
рони,
:p |
более-менее развязал - была ошибка в цикле.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.slider{
width: 300px;
margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/south-street/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
var arr = [[30,40],[50,60],[70,80],[90,100]],
rm = $("#rooms"),
sq = $("#square");
rm.slider({
min: 1,
max: 4,
step: 1,
values: [1,2],
range: true,
change: function(event, ui) {
var ar = sq.slider("option","values");
ar[0] = arr[ui.values[0] - 1][0];
ar[1] = arr[ui.values[1] - 1][1];
sq.slider("option","values",ar);
}
});
sq.slider({
min: 30,
max: 100,
step: 10,
values: [30,50],
range: true,
change: function(event, ui) {
var ar = rm.slider("option","values");
for (var i = 0; i < arr.length; i++){
if(ui.values[0] <= arr[i][0]) {
ar[0] = i + 1;
break;
}
}
for (var i = 0; i < arr.length; i++){
if(ui.values[1] >= arr[i][0]) ar[1] = i + 1;
}
rm.slider("option","values",ar);
}
})
});
</script>
</head>
<body>
<div class="slider" id="rooms"></div>
<div class="slider" id="square"></div>
</body>
</html>
|
Мб надо два отдельных обработчика??
|
j0hnik,
Они отдельные (строки 27-32 и 40-47, второй закомментирован). Но если по первому слайдеру меняем значение в другом, то у него тоже возникает событие change и он влияет на первый, и они входят в клинч. |
Dilettante_Pro,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.slider{
width: 300px;
margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/south-street/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
var arr = [[30,40],[50,60],[70,80],[90,100]],
rm = $("#rooms"),
sq = $("#square");
rm.slider({
min: 1,
max: 4,
step: 1,
values: [1,2],
range: true,
slide: function(event, ui) {
var ar = [];
ar[0] = arr[ui.values[0] - 1][0];
ar[1] = arr[ui.values[1] - 1][1];
sq.slider("option","values",ar);
}
});
sq.slider({
min: 30,
max: 100,
step: 10,
values: [30,50],
range: true,
slide: function(event, ui) {
var ar = rm.slider("option","values");
for (var i = 0; i < arr.length; i++){
if(ui.values[0] <= arr[i][0]) {
ar[0] = i + 1;
break;
}
}
for (var i = 0; i < arr.length; i++){
if(ui.values[1] >= arr[i][0]) ar[1] = i + 1;
}
rm.slider("option","values",ar);
}
})
});
</script>
</head>
<body>
<div class="slider" id="rooms"></div>
<div class="slider" id="square"></div>
</body>
</html>
|
Dilettante_Pro,
change в данном случае не подходит |
j0hnik,
исправил - вроде работает с change Поправил вариант со slide тоже - он работает повеселее - интерактивнее - , чем change, и работает корректнее - все-таки по change сохраняется завязанность по событиям |
| Часовой пояс GMT +3, время: 17:35. |