Есть 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>