Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  
    #sliders {
    width: 200px;
}
​
#sliders li {
    margin-bottom: 10px;
}
​
#sliders div {
    margin-bottom: 5px;
}
  </style>
<body>
​
  <ul id="sliders">
    <li>
        <div class="slider"></div>
        <span class="value">0</span>
    </li>
    <li>
        <div class="slider"></div>
        <span class="value">0</span>
    </li>
    <li>
        <div class="slider"></div>
        <span class="value">0</span>
    </li>
</ul>
  <script>
    
  var sliders = $("#sliders .slider");
​
sliders.each(function() {
    var value = parseInt($(this).text(), 10),
        availableTotal = 100;
​
    $(this).empty().slider({
        value: 0,
        min: 0,
        max: 100,
        range: "max",
        step: 10,
        animate: 100,
        slide: function(event, ui) {
            // Update display to current value
            $(this).siblings().text(ui.value + '%');
          
          console.log(ui.value);
​
            // Get current total
            var total = 0;
​
            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });
​
            // Need to do this because apparently jQ UI
            // does not update value until this event completes
            total += ui.value;
​
            var max = availableTotal - total;
​
            // Update each slider
            sliders.not(this).each(function() {
                var t = $(this),
                    value = t.slider("option", "value");
​
                t.slider("option", "max", max + value)
                    .siblings().text(value + '%');
                t.slider('value', value);
              console.log(value);
            });
        }
    });
});
    
  </script>
</body>
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers