ElementStacks

HTML

<ul id="sliders" class="conteneur">    
    <li>
    <p style="width: 50px;
    float: left;
    margin-right: 40px;
    padding-top: 4px;">20</p>
    <div  class="selector inactive"></div>
    </li>
    <li>
    <p style="width: 50px;
    float: left;
    margin-right: 40px;
    padding-top: 4px;">20</p>
    <div  class="selector inactive"></div>
    </li>
    <li>
    <p style="width: 50px;
    float: left;
    margin-right: 40px;
    padding-top: 4px;">20</p>
    <div  class="selector inactive"></div>
    </li>
    <li>
    <p style="width: 50px;
    float: left;
    margin-right: 40px;
    padding-top: 4px;">20</p>
    <div  class="selector inactive"></div>
    </li>
    <li>
    <p style="width: 50px;
    float: left;
    margin-right: 40px;
    padding-top: 4px;">20</p>
    <div  class="selector inactive"></div>
    </li>    
</ul>

CSS

body
{
    background: #1C1C1C;
    color:white;
}
.conteneur
{
    width: 400px;
    margin: auto;
    margin-top: 100px;
}
.ui-slider
{
    float: left;
    position: relative;
    width: 200px;
    height: 20px;
    background: rgba(255,255,255,0.1);
    margin: 20px;
    border-radius: 1000px;
}
.ui-slider .ui-slider-handle
{
    position: absolute;
    z-index: 2;
    width: 20px;
    height: 20px;
    cursor: default;
    background: #356123;
    margin-left: -10px;

    box-shadow: 0 0 8px black;
    -webkit-box-shadow: 0 0 8px black;
    -moz-box-shadow: 0 0 8px black;
    -o-box-shadow: 0 0 8px black;
    -ms-box-shadow: 0 0 8px black;
    border-radius: 1000px;
    -webkit-border-radius: 1000px;
    -moz-border-radius: 1000px;
    -o-border-radius: 1000px;
    -ms-border-radius: 1000px;
}
.ui-slider a {outline:none;}
.ui-slider .ui-slider-range
{
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-position: 0 0;
}

JavaScript

var sliders=$('#sliders .selector');    
var numberOfSliders=0;
sliders.each(function() {
   numberOfSliders=numberOfSliders+1;
    $(this).empty().slider({
        value: 20,
        min: 0,
        max: 100,
        range: "max",
        step: 1,
        animate: false,
        change: function(event, ui) {
            $(this).prev().text(ui.value);
        },
        slide: function(event, ui) {
           $(this).prev().text(ui.value);
            
        }
    })        
});
    
    


$( ".selector" ).bind("slide", function(event, ui) {

    $(event.srcElement).removeClass('inactive');
    var valuechange = 0;

    $('.inactive').each(function(value, item){
        // get sum of other sliders
        valuechange += $(item).slider( "option", "value");
    });
    
    // subtract sum(others) + this value with 100 to get         current changed value
    valuechange = (valuechange + (ui.value)) - 100;    
    
    
    var count=0,count1=0,sum=0,decimalPoint=0;
    $('.inactive').each(function(value, item){
        count=count+1;
    });
    
    
    $('.inactive').each(function(value, item){
        // add other sliders values to changedvalue / (numberOfSliders-1)
        
        count1=count1+1;
        
        var itemvalue = $(item).slider("option", "value");
        var temp=
        decimalPoint=Math.ceil(itemvalue + ((valuechange / (numberOfSliders-1)) * -1))- (itemvalue +                 ((valuechange / (numberOfSliders-1)) * -1));
        
        if(count1==count){ 
         $(item).slider('value',(Math.ceil(itemvalue + ((valuechange / (numberOfSliders-1)) * -1)) -                               4*decimalPoint));
        }
        else{        
        $(item).slider('value',Math.ceil( itemvalue + ((valuechange / (numberOfSliders-1)) * -1)));        
        }        
        
    });
      
    $(event.srcElement).addClass('inactive');
});