rrichardson · October 25, 2011 22:25
diff --git a/gistfile1.html b/gistfile1.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset=utf-8>
  <meta name="viewport" content="width=620">
  <title>Slider demo</title>
  <link type="text/css" href="css/flick/jquery-ui-1.8.16.custom.css" rel="Stylesheet" />	
  <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
  <style>
    .halfwidth { 
      margin-right: -40px;
      width: 50%;
    }
    .value {
      display: none;
    }
  </style>
  <script>
    Number.prototype.clamp = function(min, max) {
      return Math.min(Math.max(this, min), max);
    };
    
    $(document).ready(function() {
      var max_total = 400;
      var num_unlocked = 4;

      var locks = $("button.lock");
      locks.each(function() {
        $(this).click(function() {
          if ($(this).text() == "Lock") {
            $(this).siblings().filter(".slider").slider("option", "disabled", true);
            $(this).text("Unlock");
            num_unlocked--;
          }
          else {
            $(this).siblings().filter(".slider").slider("option", "disabled", false);
            $(this).text("Lock");
            num_unlocked++;
          }
        });
      });

      var sliders = $("#sliders .slider");
      sliders.each(function() {
        var value = parseInt($(this).text(), 10)
        this.lastval = 100;

        $(this).empty().slider({
          value: 100,
          min: 0,
          max: 200,
          range: "max",
          step: 1,
          animate: true,
          slide: function(event, ui) {
            if (num_unlocked < 2) { return false; }  
            // Get current total
            var total = 0;
            var an_unlocked_slider_is_0 = false;

            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;

            // spread the variation between the other three sliders
            // we leverage the fact that a negative difference will result
            // in negative value applied to the other sliders
            var difference = Math.round((max_total - total) / (num_unlocked-1));
            
            // Update each slider
            try {
              sliders.not(this).each(function() {
                  var t = $(this);
                  if ($(t.siblings()[1]).text() == "Lock") // if scroller is unlocked
                  {
                    var newval = (t.slider("option", "value") + difference) //.clamp(0, 200);
                    if ((newval < 0) || (newval > 200)) { throw "OutOfBounds"; }
                    $(t.slider("option", "value", newval).siblings()[0]).text(newval);
                    t.slider('value', newval);
                  }
              });
            } catch (er) { 
              if (er == "OutOfBounds") { return false; }
            }

            // Update display to current value
            $(this).siblings().filter(".value").text(ui.value);

          }
        });
      });
    });
  </script>
 </head>
 <body>
  <ul id="sliders">
    <li>
        <div class="slider halfwidth"></div>
        <span class="value">100</span>
        <button class="lock">Lock</button>
    </li>
    <li>
        <div class="slider halfwidth"></div>
        <span class="value">100</span>
        <button class="lock">Lock</button>
    </li>
    <li>
        <div class="slider halfwidth"></div>
        <span class="value">100</span>
        <button class="lock">Lock</button>
    </li>
    <li>
        <div class="slider halfwidth"></div>
        <span class="value">100</span>
        <button class="lock">Lock</button>
    </li>
  </ul>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset=utf-8>
	<meta name="viewport" content="width=620">
	<title>Slider demo</title>
	<link type="text/css" href="css/flick/jquery-ui-1.8.16.custom.css" rel="Stylesheet" />
	<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
	<style>
	.halfwidth {
	margin-right: -40px;
	width: 50%;
	}
	.value {
	display: none;
	}
	</style>
	<script>
	Number.prototype.clamp = function(min, max) {
	return Math.min(Math.max(this, min), max);
	};

	$(document).ready(function() {
	var max_total = 400;
	var num_unlocked = 4;

	var locks = $("button.lock");
	locks.each(function() {
	$(this).click(function() {
	if ($(this).text() == "Lock") {
	$(this).siblings().filter(".slider").slider("option", "disabled", true);
	$(this).text("Unlock");
	num_unlocked--;
	}
	else {
	$(this).siblings().filter(".slider").slider("option", "disabled", false);
	$(this).text("Lock");
	num_unlocked++;
	}
	});
	});

	var sliders = $("#sliders .slider");
	sliders.each(function() {
	var value = parseInt($(this).text(), 10)
	this.lastval = 100;

	$(this).empty().slider({
	value: 100,
	min: 0,
	max: 200,
	range: "max",
	step: 1,
	animate: true,
	slide: function(event, ui) {
	if (num_unlocked < 2) { return false; }
	// Get current total
	var total = 0;
	var an_unlocked_slider_is_0 = false;

	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;

	// spread the variation between the other three sliders
	// we leverage the fact that a negative difference will result
	// in negative value applied to the other sliders
	var difference = Math.round((max_total - total) / (num_unlocked-1));

	// Update each slider
	try {
	sliders.not(this).each(function() {
	var t = $(this);
	if ($(t.siblings()[1]).text() == "Lock") // if scroller is unlocked
	{
	var newval = (t.slider("option", "value") + difference) //.clamp(0, 200);
	if ((newval < 0) \|\| (newval > 200)) { throw "OutOfBounds"; }
	$(t.slider("option", "value", newval).siblings()[0]).text(newval);
	t.slider('value', newval);
	}
	});
	} catch (er) {
	if (er == "OutOfBounds") { return false; }
	}

	// Update display to current value
	$(this).siblings().filter(".value").text(ui.value);

	}
	});
	});
	});
	</script>
	</head>
	<body>
	<ul id="sliders">
	<li>
	<div class="slider halfwidth"></div>
	<span class="value">100</span>
	<button class="lock">Lock</button>
	</li>
	<li>
	<div class="slider halfwidth"></div>
	<span class="value">100</span>
	<button class="lock">Lock</button>
	</li>
	<li>
	<div class="slider halfwidth"></div>
	<span class="value">100</span>
	<button class="lock">Lock</button>
	</li>
	<li>
	<div class="slider halfwidth"></div>
	<span class="value">100</span>
	<button class="lock">Lock</button>
	</li>
	</ul>
	</body>
	</html>