title: jQuery sliders setOpacity of individual OL layers while keeping a max cumulative total
body: <p>There are many examples of using the jQuery sliders and running a maximum cumulative total. However, I have been unsuccessful in drafting a version that will work with my application. I need to be able to set individual opacities of 6 openlayers layers, using the jQuery sliders, while never exceeding a cumulative total of 100 slider units.</p>
  
  <hr>
  
  <h2><strong>Updated</strong></h2>
  
  <p>Here is how I am currently implementing it. I cannot for the life of me figure out how to go about code refactoring so that I reduce code duplication...</p>
  
  <pre><code>var sliders = $("#sliders .slider");
  
  sliders.each(function() {
  var value = parseInt($(this).text()),
      availableTotal = 100;
  
  $(function() {
      $("#one").slider({
          range: "min",
          min: 0,
          value: 20,
          slide: function(event, ui) {
  
              // Get current total
              var total = ui.value;
  
              sliders.not(this).each(function() {
                  total += $(this).slider("option", "value");
              });
              if (total &gt; availableTotal) {
                  return false;
              }
              hii_1.setOpacity(ui.value / 100);
              // Update display to current value
              $(this).siblings().text(ui.value);
          }
      });
      $("#two").slider({
          range: "min",
          min: 0,
          value: 20,
          slide: function(event, ui) {
  
              // Get current total
              var total = ui.value;
  
              sliders.not(this).each(function() {
                  total += $(this).slider("option", "value");
              });
              if (total &gt; availableTotal) {
                  return false;
              }
              hii_2.setOpacity(ui.value / 100);
              // Update display to current value
              $(this).siblings().text(ui.value);
          }
      });
      $("#three").slider({
          range: "min",
          min: 0,
          value: 20,
          slide: function(event, ui) {
  
              // Get current total
              var total = ui.value;
  
              sliders.not(this).each(function() {
                  total += $(this).slider("option", "value");
              });
              if (total &gt; availableTotal) {
                  return false;
              }
              hii_3.setOpacity(ui.value / 100);
              // Update display to current value
              $(this).siblings().text(ui.value);
          }
      });
      $("#four").slider({
          range: "min",
          min: 0,
          value: 16,
          slide: function(event, ui) {
  
              // Get current total
              var total = ui.value;
  
              sliders.not(this).each(function() {
                  total += $(this).slider("option", "value");
              });
              if (total &gt; availableTotal) {
                  return false;
              }
              hii_4.setOpacity(ui.value / 100);
              // Update display to current value
              $(this).siblings().text(ui.value);
          }
      });
      $("#five").slider({
          range: "min",
          min: 0,
          value: 16,
          slide: function(event, ui) {
  
              // Get current total
              var total = ui.value;
  
              sliders.not(this).each(function() {
                  total += $(this).slider("option", "value");
              });
              if (total &gt; availableTotal) {
                  return false;
              }
              hii_5.setOpacity(ui.value / 100);
              // Update display to current value
              $(this).siblings().text(ui.value);
          }
      });
      $("#six").slider({
          range: "min",
          min: 0,
          value: 8,
          slide: function(event, ui) {
  
              // Get current total
              var total = ui.value;
  
              sliders.not(this).each(function() {
                  total += $(this).slider("option", "value");
              });
              if (total &gt; availableTotal) {
                  return false;
              }
              hii_6.setOpacity(ui.value / 100);
              // Update display to current value
              $(this).siblings().text(ui.value);
          }
      });
  });
  });
  </code></pre>
  
  <hr>
  
  <h2><strong>Original</strong></h2>
  
  <blockquote>
    <p>The example I am most familiar with is posted here and below
    <a href="http://jsfiddle.net/markieta/cWyQ3/" rel="nofollow">http://jsfiddle.net/markieta/cWyQ3/</a></p>
  
  <pre><code>var sliders = $("#sliders .slider");
  sliders.each(function() {
      var value = parseInt($(this).text()),
          availableTotal = 100;
      $(this).empty().slider({
          value: 0,
          min: 0,
          max: 100,
          range: "min",
          animate: true,
          slide: function(event, ui) {
              // Update display to current value
              $(this).siblings().text(ui.value);
              // Get current total
              var total = 0;
              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;
              var max = availableTotal - total;
              // Update each slider
              sliders.not(this).each(function() {
                  var t = $(this),
                      value = t.slider("option", "value");
                  t.slider("option", "max", max + value).siblings().text(value);
                  t.slider('value', value);
              });
          }
      });
  });
  </code></pre>
    
    <p>Originally, I was setting the OpenLayers layer opacity using the
    setOpacity method during the slide event of each unique slider.
    However, I could not figure out how to keep a running total with this
    method so as my sliders would not exceed 100 cumulative units.</p>
  
  <pre><code>$(function() {
      $( "#slider1" ).slider({
      range: "min",
      min: 0,
      value: opacities[0],
      slide: function(e, ui) {
          hii_1.setOpacity(ui.value / 100);
          $( "#amount1" ).val( ui.value );
          }
      });
      $("#amount1" ).val($( "#slider1" ).slider( "value" ) );
  });
  </code></pre>
    
    <p>** x6 sliders **</p>
    
    <p>Any insight?</p>
  </blockquote>