jQuery UI Sliders

Multiple sliders that add up to a maximum of 100%.

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css">
<ul id="sliders">
  <li>
    <div class="slider"></div>
    Corey:
    <span class="value">0%</span>
  </li>
  <li>
    <div class="slider"></div>
    Conor:
    <span class="value">0%</span>
  </li>
  <li>
    <div class="slider"></div>
    Chris:
    <span class="value">0%</span>
  </li>
  <li>
    <div class="slider"></div>
    Dan:
    <span class="value">0%</span>
  </li>
</ul>

CSS

#sliders {
  width: 200px;
  margin: 50px;
}

#sliders li {
  margin-bottom: 10px;
}

#sliders div {
  margin-bottom: 5px;
}

JavaScript

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: 1,
    animate: 100,
    slide: function(event, ui) {
      // Update display to current value
      $(this).siblings().text(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 + ' / ' + (max + value) + "% available");
        t.slider('value', value);
      });
    }
  });
});