Клавер,
код применим для любого количества ползунков и общей суммы.
<!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>