title: How can I synchronize html 5 input type="range" (slider) items?
body: <p>I have the following html, containing 3 html5 input="range" items, which I'll call sliders.  The html also has a span tag to display the value for each slider.  Each span tag displays a percentage amount, all 3 of which sum up to 100%.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;input type="range" class="slider" id="r1" value="70" /&gt;&lt;span id="s1"&gt;&lt;/span&gt;&lt;br /&gt;
      &lt;input type="range" class="slider" id="r2" value="20" /&gt;&lt;span id="s2"&gt;&lt;/span&gt;&lt;br /&gt;
      &lt;input type="range" class="slider" id="r3" value="10" /&gt;&lt;span id="s3"&gt;&lt;/span&gt;&lt;br /&gt;
      &lt;input type="hidden" class="placeholder" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've written the following jquery code that I'm using to update the 2 sliders that aren't being changed, as any one slider is being changed.  The code keeps all the values of the span tags in synch, adjusting the two whose sliders are not being changed so that the sum of all three is 100.</p>
  
  <p>jQuery:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $().ready(function () {
  
          //set the initial values for the spans
          var sliders = $('.slider');
          sliders.each(function (index, element) {
              var slider = $(this);
              slider.next('span').text(element.value);
          })
  
          $('.container').on('change', '.slider', function () {
              var slider = $(this);
              var sliderId = this.id;
              var amount = this.value;
              slider.next('span').text(amount);
  
              //Iterate over the sliders that are not being changed, and update them
              var sliders = $('.slider');
              var sliderCount = sliders.length;
              var otherSlidersCount = sliderCount - 1;
              sliders.each(function (index, element) {
                  var x_id = this.id;
  
                  if (x_id != sliderId) {
                      var totalChangeAmount = 100 - amount;
                      var sliderChangeAmount = totalChangeAmount / otherSlidersCount;
                      this.value = sliderChangeAmount;
                      $(this).next('span').text(sliderChangeAmount);
                  }
  
              })
  
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is a jsfiddle with the working code:</p>
  
  <p><a href="http://jsfiddle.net/rdclark/zCDNr/" rel="nofollow">jsfiddle</a></p>
  
  <p>The problem I have, is that I'm just dividing up the changed percentage from the changing slider by the count of the other sliders (2) and then allocating that amount equally to each of the other 2 sliders.  </p>
  
  <p>I need to change it so that the value of the span for each of the non changing sliders is changed relative to its existing value.  For example, if I increase slider 1 from 70 to 80, then slider 2 should decrease by 5 to 15, and slider 3 should also decrease by 5 to 5 (for a total of 100 percent).  </p>
  
  <p>Can anyone help with suggestions on how to accomplish this? </p>