Jquery Unique Total Sliders

by Avinashullal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<div class="demo">
    <div class="slider"></div>
    <p>Value: 0</p>
    <div class="slider"></div>
    <p>Value: 0</p>
    <div class="slider"></div>
    <p>Value: 0</p>
    <div class="slider"></div>
    <p>Value: 0</p>
</div>

CSS

body {
    padding: 1.5em;
}
div.slider {
    margin: 1em 0;
}

JavaScript

var maxSum = 20;

var $sliders = $(".slider").slider({
    value: 0,
    min: 0,
    max: 20,
    step: 1,
    stop: function (event, ui) {
        $(this).next().text("Value: " + ui.value);
        var count = 0;
        $(".slider").not(this).each(function () {
            if ($(this).slider("option", "value") > 0) {
                count++;
            }
        });
        // alert(count);
        var available = 20 - ui.value
        // alert(available);
        valueEach = parseInt(available / (count > 0 ? count : 3));

        $(".slider").not(this).each(function () {
            if ($(this).slider("option", "value") > 0 || count == 0) {
                $(this).slider("option", "value", valueEach);
                $(this).next().text("Value: " + valueEach);
            }
        });
    }
});