Зависимый слайдер
Подскажите, пожалуйста, как задать третьему слайдеру зависимость от второго. Надо сделать так, чтобы бегунок на третьем слайдере останавливался при достижении значения, установленного на втором слайдере.
jQuery(function() {
var
resultXv = jQuery("#itogXv span"),
itogXv = 0,
zv=50,
zn=50,
xn=50;
function recount() {
itogXv = (zv*zn)/xn;
resultXv.html(itogXv);
};
$(document).on("change keyup", "#amountZv", function() {
zv = +$(this).val();
$("#sliderZv").slider("value", zv);
recount();
});
$(document).on("change keyup", "#amountZn", function() {
zn = +$(this).val();
$("#sliderZn").slider("value", zn);
recount();
});
$(document).on("change keyup", "#amountXn", function() {
xn = +$(this).val();
$("#sliderXn").slider("value", xn);
recount();
});
});
$(function() {
$("#sliderZv").slider({
range: "min",
value: 50,
min: 0,
max: 100,
slide: function(event, ui) {
$('#amountZv').val(ui.value).trigger("change");
}
});
$("#amountZv").val($("#sliderZv").slider("value"));
});
$(function() {
$("#sliderZn").slider({
range: "min",
value: 50,
min: 0,
max: 100,
slide: function(event, ui) {
$('#amountZn').val(ui.value).trigger("change");
}
});
$("#amountZn").val($("#sliderZn").slider("value"));
});
$(function() {
$("#sliderXn").slider({
range: "min",
value: 50,
min: 0,
max: 100,
slide: function(event, ui) {
$('#amountXn').val(ui.value).trigger("change");
}
});
$("#amountXn").val($("#sliderXn").slider("value"));
});
|
няу,
сделайте полный макет c css и html |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Бегунок</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css">
div.range
{width: 300px;
height: 0px;
padding: 7px;
background: #c0c0c0;
box-shadow: inset 0 0 6px;
border-radius: 6px;
}
</style>
<script type="text/javascript">
jQuery(function() {
var
resultXv = jQuery("#itogXv span"),
itogXv = 0,
zv=50,
zn=50,
xn=50;
function recount() {
itogXv = (zv*zn)/xn;
resultXv.html(itogXv);
};
$(document).on("change keyup", "#amountZv", function() {
zv = +$(this).val();
$("#sliderZv").slider("value", zv);
recount();
});
$(document).on("change keyup", "#amountZn", function() {
zn = +$(this).val();
$("#sliderZn").slider("value", zn);
recount();
});
$(document).on("change keyup", "#amountXn", function() {
xn = +$(this).val();
$("#sliderXn").slider("value", xn);
recount();
});
});
$(function() {
$("#sliderZv").slider({
range: "min",
value: 50,
min: 0,
max: 100,
slide: function(event, ui) {
$('#amountZv').val(ui.value).trigger("change");
}
});
$("#amountZv").val($("#sliderZv").slider("value"));
});
$(function() {
$("#sliderZn").slider({
range: "min",
value: 50,
min: 0,
max: 100,
slide: function(event, ui) {
$('#amountZn').val(ui.value).trigger("change");
}
});
$("#amountZn").val($("#sliderZn").slider("value"));
});
$(function() {
$("#sliderXn").slider({
range: "min",
value: 50,
min: 0,
max: 100,
slide: function(event, ui) {
$('#amountXn').val(ui.value).trigger("change");
}
});
$("#amountXn").val($("#sliderXn").slider("value"));
});
</script>
</head>
<body>
<p>
<label for="amount">Требуемое общее количество жидкости:</label>
<input type="text" id="amountZv" readonly style="border:0; font-weight:bold;">
<div id="sliderZv" class="range"></div>
</p>
<p>
<label for="amount">Крепость в базовой жидкости:</label>
<input type="text" id="amountXn" readonly style="border:0; font-weight:bold;">
<div id="sliderXn" class="range"></div>
</p>
<p>
<label for="amount">Желаемая крепость на выходе:</label>
<input type="text" id="amountZn" readonly style="border:0; font-weight:bold;">
<div id="sliderZn" class="range"></div>
</p>
<table>
<tr><th>Компонент</th><th>Мл</th></tr>
<tr><td>Базовая жидкость</td><td id="itogXv"><span>0</span></td></tr>
</table>
</body>
</html>
|
няу,
вариант ...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Бегунок</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css">
div.range
{width: 300px;
height: 0px;
padding: 7px;
background: #c0c0c0;
box-shadow: inset 0 0 6px;
border-radius: 6px;
}
</style>
<script type="text/javascript">
jQuery(function() {
var
resultXv = jQuery("#itogXv span"),
itogXv = 0,
zv=50,
zn=50,
xn=50;
function recount() {
itogXv = (zv*zn)/xn;
resultXv.html(itogXv);
};
$(document).on("change keyup", "#amountZv", function() {
zv = +$(this).val();
$("#sliderZv").slider("value", zv);
recount();
});
$(document).on("change keyup", "#amountZn", function() {
zn = +$(this).val();
$("#sliderZn").slider("value", zn);
recount();
});
$(document).on("change keyup", "#amountXn", function() {
xn = +$(this).val();
$("#sliderXn").slider("value", xn);
recount();
});
$("#sliderZv").slider({
range: "min",
value: 50,
min: 0,
max: 100,
slide: function(event, ui) {
$('#amountZv').val(ui.value).trigger("change");
}
});
$("#amountZv").val($("#sliderZv").slider("value"));
$("#sliderZn").slider({
range: "min",
value: 50,
min: 0,
max: 100,
slide: function(event, ui) {
$('#amountZn').val(ui.value).trigger("change");
},
change : function(event, ui) {
$('#amountZn').val(ui.value).trigger("change");
}
});
$("#amountZn").val($("#sliderZn").slider("value"));
$("#sliderXn").slider({
range: "min",
value: 50,
min: 0,
max: 100,
slide: function(event, ui) {
$('#amountXn').val(ui.value).trigger("change");
},
stop:function(event, ui) {
var val = $("#sliderZn").slider("value");
val > ui.value && (val = ui.value);
$("#sliderZn").slider("option", {"max" : ui.value, "value" : val})
}
});
$("#amountXn").val($("#sliderXn").slider("value"));
});
</script>
</head>
<body>
<p>
<label for="amount">Требуемое общее количество жидкости:</label>
<input type="text" id="amountZv" readonly style="border:0; font-weight:bold;">
<div id="sliderZv" class="range"></div>
</p>
<p>
<label for="amount">Крепость в базовой жидкости:</label>
<input type="text" id="amountXn" readonly style="border:0; font-weight:bold;">
<div id="sliderXn" class="range"></div>
</p>
<p>
<label for="amount">Желаемая крепость на выходе:</label>
<input type="text" id="amountZn" readonly style="border:0; font-weight:bold;">
<div id="sliderZn" class="range"></div>
</p>
<table>
<tr><th>Компонент</th><th>Мл</th></tr>
<tr><td>Базовая жидкость</td><td id="itogXv"><span>0</span></td></tr>
</table>
</body>
</html>
|
ограничение диапазона ui slider
няу,
или так
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Бегунок</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css">
div.range
{width: 300px;
height: 0px;
padding: 7px;
background: #c0c0c0;
box-shadow: inset 0 0 6px;
border-radius: 6px;
}
</style>
<script type="text/javascript">
jQuery(function() {
var
resultXv = jQuery("#itogXv span"),
itogXv = 0,
zv=50,
zn=50,
xn=50;
function recount() {
itogXv = (zv*zn)/xn;
resultXv.html(itogXv);
};
$(document).on("change keyup", "#amountZv", function() {
zv = +$(this).val();
$("#sliderZv").slider("value", zv);
recount();
});
$(document).on("change keyup", "#amountZn", function() {
zn = +$(this).val();
$("#sliderZn").slider("value", zn);
recount();
});
$(document).on("change keyup", "#amountXn", function() {
xn = +$(this).val();
$("#sliderXn").slider("value", xn);
recount();
});
$("#sliderZv").slider({
range: "min",
value: 50,
min: 0,
max: 100,
slide: function(event, ui) {
$('#amountZv').val(ui.value).trigger("change");
}
});
$("#amountZv").val($("#sliderZv").slider("value"));
$("#sliderZn").slider({
range: "min",
value: 50,
min: 0,
max: 100,
slide: function(event, ui) {
var val = $("#sliderXn").slider("value");
if(ui.value > val) return false;
$('#amountZn').val(ui.value).trigger("change");
},
change : function(event, ui) {
var val = $("sliderXn").slider("value");
if(ui.value > val) return false;
$('#amountZn').val(ui.value).trigger("change");
}
});
$("#amountZn").val($("#sliderZn").slider("value"));
$("#sliderXn").slider({
range: "min",
value: 50,
min: 0,
max: 100,
slide: function(event, ui) {
$('#amountXn').val(ui.value).trigger("change");
},
stop:function(event, ui) {
var val = $("#sliderZn").slider("value");
val > ui.value && (val = ui.value);
$("#sliderZn").slider("value" , val)
}
});
$("#amountXn").val($("#sliderXn").slider("value"));
});
</script>
</head>
<body>
<p>
<label for="amount">Требуемое общее количество жидкости:</label>
<input type="text" id="amountZv" readonly style="border:0; font-weight:bold;">
<div id="sliderZv" class="range"></div>
</p>
<p>
<label for="amount">Крепость в базовой жидкости:</label>
<input type="text" id="amountXn" readonly style="border:0; font-weight:bold;">
<div id="sliderXn" class="range"></div>
</p>
<p>
<label for="amount">Желаемая крепость на выходе:</label>
<input type="text" id="amountZn" readonly style="border:0; font-weight:bold;">
<div id="sliderZn" class="range"></div>
</p>
<table>
<tr><th>Компонент</th><th>Мл</th></tr>
<tr><td>Базовая жидкость</td><td id="itogXv"><span>0</span></td></tr>
</table>
</body>
</html>
|
Огромное спасибо
|
| Часовой пояс GMT +3, время: 04:48. |