amitp/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<style>
  input { display: block; }
  .remainder { position: absolute; left: 175px; height: 7em; width: 1px; background: hsl(220, 50%, 50%); }
</style>

<body>
  <p>
    What if you want multiple sliders to allocate a budget, while not
    allowing the sliders to exceed 100%? The blue area on the right is
    the <em>unallocated</em> budget, and the sliders won't let you
    allocate more than 100%.
  </p>

</body>

<script src="http://d3js.org/d3.v3.min.js"></script>

<script>
  var remainder = d3.select("body").append("div").attr('class', "remainder");

  var sliders = d3.select("body").selectAll("input").data(d3.range(6));
  sliders.enter().append('input')
    .attr('type', "range")
    .attr('min', 0)
    .attr('max', 100)
    .attr('value', 0)
    .on('input', function() {
        var s = sum();
        if (s > 100) {
            var current = parseFloat(this.value);
            this.value = 100 - s + current;
        }
        update();
    });

  function sum() {
      var s = 0;
      sliders.each(function() { s += parseFloat(this.value); });
      return s;
  }

  function update() {
      remainder.style('width', (2 * (100 - sum())) + "px");
  }

  update();

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style>
	input { display: block; }
	.remainder { position: absolute; left: 175px; height: 7em; width: 1px; background: hsl(220, 50%, 50%); }
	</style>

	<body>
	<p>
	What if you want multiple sliders to allocate a budget, while not
	allowing the sliders to exceed 100%? The blue area on the right is
	the <em>unallocated</em> budget, and the sliders won't let you
	allocate more than 100%.
	</p>

	</body>

	<script src="http://d3js.org/d3.v3.min.js"></script>

	<script>
	var remainder = d3.select("body").append("div").attr('class', "remainder");

	var sliders = d3.select("body").selectAll("input").data(d3.range(6));
	sliders.enter().append('input')
	.attr('type', "range")
	.attr('min', 0)
	.attr('max', 100)
	.attr('value', 0)
	.on('input', function() {
	var s = sum();
	if (s > 100) {
	var current = parseFloat(this.value);
	this.value = 100 - s + current;
	}
	update();
	});

	function sum() {
	var s = 0;
	sliders.each(function() { s += parseFloat(this.value); });
	return s;
	}

	function update() {
	remainder.style('width', (2 * (100 - sum())) + "px");
	}

	update();

	</script>