title: Multiple connected/dependent sliders with Dojo
body: <p>I am trying to create some sliders, which are interconnected. All sliders should always give a sum of 100. So, if Slider 1 = 50, Slider 2 and 3 should be set to 25 automatically.</p>
  
  <p>The code works so far with some limitations: I cannot manipulate the sliders live (intermediateChange: true) and the sliders do not move any more, when one of them reached 100 and so the residuum got 0.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;script&gt;
      require(["dijit/form/HorizontalSlider"], function(HorizontalSlider) {
          var slider1 = new HorizontalSlider({
              minimum: 0,
              maximum: 100,
              value: 10,
              intermediateChanges: false,
              onChange: function() {
                  console.log("Slider 1: " + slider1.get('value'));
                  var residue = slider2.get('value') + slider3.get('value')
                  slider2.set('value', (slider2.get('value') / residue) * (100 - slider1.get('value')));
                  slider3.set('value', (slider3.get('value') / residue) * (100 - slider1.get('value')));
              }
          }, "slider1");
  
          var slider2 = new HorizontalSlider({
              minimum: 0,
              maximum: 100,
              value: 45,
              intermediateChanges: false,
              onChange: function() {
                  console.log("Slider 2: " + slider2.get('value'));
                  var residue = slider1.get('value') + slider3.get('value')
                  slider1.set('value', (slider1.get('value') / residue) * (100 - slider2.get('value')));
                  slider3.set('value', (slider3.get('value') / residue) * (100 - slider2.get('value')));
              }
          }, "slider2");
  
          var slider3 = new HorizontalSlider({
              minimum: 0,
              maximum: 100,
              value: 45,
              intermediateChanges: false,
              onChange: function() {
                  console.log("Slider 3: " + slider3.get('value'));
                  var residue = slider1.get('value') + slider2.get('value')
                  slider1.set('value', (slider1.get('value') / residue) * (100 - slider3.get('value')));
                  slider2.set('value', (slider2.get('value') / residue) * (100 - slider3.get('value')));
              }
          }, "slider3");
  
          slider1.startup();
          slider2.startup();
          slider3.startup();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>How can I achieve the sliders keep connected, even if one was put to maximum?
  Is there a smarter solution? In this way the code gets longer with every additional slider...</p>