title: Multiple vertical slider bars - making them dependent on each other's values
body: <p>I'm trying to make multiple vertical sliders that are dependent on each other. Thanks to all the great posts on this site, I've already come a long way, but I could really use some help to get to the finish.</p>
  
  <p>The goal: if a slider is moved, it should return the value below the slider bar, and if this value is higher than the slider values on the right hand side, all the slider bars on the right should move accordingly and the values below the slider bars should be the same minimum amount. If the value is not higher, the values and bars on the right should stay as they are.</p>
  
  <p>The part that I got to work so far: if the slider is moved, it should return the value below the slider bar</p>
  
  <p>This is done with a simple code:</p>
  
  <pre><code>function showValue(range, newValue) 
  { 
      document.getElementById( range ).innerHTML = newValue; 
  } 
  </code></pre>
  
  <p>What I think the new code should like like:</p>
  
  <pre><code>function showValue(range, newValue) 
  { 
      document.getElementById( range ).innerHTML = newValue; 
      if (newValue&gt;range+1)
      {
          (something)
      }
      else {
          (nothing)
      }   
  </code></pre>
  
  <p>I've tried to find solutions for a week but so far I haven't come up with a workable method. Any help would be much appreciated. Thanks in advance.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Slider bars&lt;/title&gt;
          &lt;style&gt;
              ul#display-inline-block-example,
              ul#display-inline-block-example li {
                  margin: 50;
                  padding: 0;
                  background: #ccffff;
              }
  
              ul#display-inline-block-example {
                  width: 311px;
                  border: 1px solid #0066cc;
              }
  
              ul#display-inline-block-example li {
                  display: inline-block;
                  width: 30px;
                  margin-left: -4px;
                  min-height: 300px;
              }
              vertical-align: top;
              /* For IE 7 */
              zoom: 1;
              *display: inline;
              }
  
              #sliders {
              width:22px;
              }
  
              .slideBG { 
                  display: block;
                  width: 30px;
                  height: 300px;
                  margin-bottom: 25px;
                  border: 1px solid #66ccff;
                  background-size:30px 30px,30px 30px;
                  background-position: 0 0,0 0;
                  background-image: -webkit-linear-gradient(top, transparent, transparent 29px, #0066cc 30px),-webkit-linear-gradient(left, transparent, transparent 29px, #66ccff 0px); 
              }
  
              border: 1px solid #000;
              }
          &lt;/style&gt;
          &lt;style&gt;
              input[type=range][orient=vertical]
              {
                  writing-mode: bt-lr; /* IE */
                  -webkit-appearance: slider-vertical; /* WebKit */
                  margin-top: 0px;
                  width: 8px;
                  height: 300px;
                  padding: 0 5px;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="slider" data-slider data-options="vertical: true;"&gt;
              &lt;ul id="display-inline-block-example"&gt;&lt;center&gt;
                  &lt;li&gt;1&lt;span class='slideBG' role="slider"&gt;
                      &lt;input type="range" min="0" max="100" value="0" step="10" onchange="showValue( 'range1', this.value)"  orient="vertical" /&gt;  
                      &lt;span id="range1"&gt;0&lt;/span&gt;
                  &lt;/span&gt;&lt;/li&gt;
                  &lt;li&gt;2&lt;span class='slideBG' role="slider"&gt;
                      &lt;input type="range" min="0" max="100" value="0" step="10" onchange="showValue( 'range2', this.value)"  orient="vertical" /&gt;  
                      &lt;span id="range2"&gt;0&lt;/span&gt;
                  &lt;/span&gt;&lt;/li&gt;
                  &lt;li&gt;3&lt;span class='slideBG' role="slider"&gt;
                      &lt;input type="range" min="0" max="100" value="0" step="10" onchange="showValue( 'range3', this.value)"  orient="vertical" /&gt;  
                      &lt;span id="range3"&gt;0&lt;/span&gt;
                  &lt;/span&gt;&lt;/li&gt;
                  &lt;li&gt;4&lt;span class='slideBG' role="slider"&gt;
                      &lt;input type="range" min="0" max="100" value="0" step="10" onchange="showValue( 'range4', this.value)"  orient="vertical" /&gt;   
                      &lt;span id="range4"&gt;0&lt;/span&gt;
                  &lt;/span&gt;&lt;/li&gt;
                  &lt;li&gt;5&lt;span class='slideBG' role="slider"&gt;
                      &lt;input type="range" min="0" max="100" value="0" step="10" onchange="showValue( 'range5', this.value)"  orient="vertical" /&gt;   
                      &lt;span id="range5"&gt;0&lt;/span&gt;
                  &lt;/span&gt;&lt;/li&gt;
                  &lt;li&gt;6&lt;span class='slideBG' role="slider"&gt;
                      &lt;input type="range" min="0" max="100" value="0" step="10" onchange="showValue( 'range6', this.value)"  orient="vertical" /&gt;   
                      &lt;span id="range6"&gt;0&lt;/span&gt;
                  &lt;/span&gt;&lt;/li&gt;
                  &lt;li&gt;7&lt;span class='slideBG' role="slider"&gt;
                      &lt;input type="range" min="0" max="100" value="0" step="10" onchange="showValue( 'range7', this.value)"  orient="vertical" /&gt;  
                      &lt;span id="range7"&gt;0&lt;/span&gt;
                  &lt;/span&gt;&lt;/li&gt;
                  &lt;li&gt;8&lt;span class='slideBG' role="slider"&gt;
                      &lt;input type="range" min="0" max="100" value="0" step="10" onchange="showValue( 'range8', this.value)"  orient="vertical" /&gt;   
                      &lt;span id="range8"&gt;0&lt;/span&gt;
                  &lt;/span&gt;&lt;/li&gt;
                  &lt;li&gt;9&lt;span class='slideBG' role="slider"&gt;
                      &lt;input type="range" min="0" max="100" value="0" step="10" onchange="showValue( 'range9', this.value)"  orient="vertical" /&gt;  
                      &lt;span id="range9"&gt;0&lt;/span&gt;
                  &lt;/span&gt;&lt;/li&gt;
                  &lt;li&gt;10&lt;span class='slideBG' role="slider"&gt;
                      &lt;input type="range" min="0" max="100" value="0" step="10" onchange="showValue( 'range10', this.value)"  orient="vertical" /&gt;  
                      &lt;span id="range10"&gt;0&lt;/span&gt;
                  &lt;/span&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;script type="text/javascript"&gt; 
              function showValue(range, newValue) 
              { 
                  document.getElementById( range ).innerHTML = newValue; 
              } 
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>