title: jQuery Slider, Combined Values - Having difficulty with Small Increments
body: <p>I have designed a jQuery Slider Control that takes a 'pool' of points, and allows them to be distributed between multiple sliders. It works pretty well, except that I am having some problems with very small overflow increments. </p>
  
  <p>Basically, it is possible to make adjustments in large quantities based on mouse movement, and so it lets someone 'spend' more in a slider than intended. I am at a loss as to how to deal with this. Posted below is my entire code.</p>
  
  <p>To test it, build a simple HTML page with this code and try sliding the first two sliders all the way to 500, then try sliding the third. It won't slide (intended behavior). </p>
  
  <p>Then, slide the first or second slider back a little bit (subtracting), and slide the third forward. You are able to occasionally go over the intended 'spendable' bounds.</p>
  
  <p>Sample will require jQuery UI, latest version from google CDN.</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <h2>Javascript</h2>
  
  <pre><code>&lt;style type="text/css"&gt;
      #eq &gt; div {
          width:300px;
      }
      #eq &gt; div .slider {
          width: 200px; float: left;
      }
      #eq &gt; div &gt; span {
          float: right;
      }
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          var spendable = 1000;
          var spent = 0;
  
          function spend(quantity) {
              spent += quantity;
              $('#attemptedToSpend').text(spent);
          }
  
          function change(previous, current) {
              var adjustment = (current - previous);
              $('#change').text(adjustment);
              return adjustment;
          }
  
          function calculateSpent() {
              var totalled = 0;
  
              $("#eq .slider").each(function () {
                  totalled += parseInt($(this).parent('div:eq(0)').find('.spent').text());
              });
  
              $('#spent').text(totalled);
          }
  
          $("#eq .slider").each(function () {
              var current = 0;
              var previous = 0;
              var adjustment = 0;
  
              $(this).slider({
                  range: "min",
                  value: 0,
                  min: 0,
                  max: 500,
                  step: 1,
                  animate: true,
                  orientation: "horizontal",
                  start: function (event, ui) {
                  },
                  stop: function (event, ui) {
                  },
                  slide: function (event, ui) {
                      // set the current value to whatever is selected.
                      current = ui.value;
  
                      // determine the adjustment being made relative to the last
                      // adjustment, instead of just the slider's value.
                      adjustment = change(previous, current);
  
                      if (spent &gt;= spendable) {
                          if (adjustment &gt; 0)
                              return false;
                      }
  
                      // spend the points, if we are able to.
                      spend(adjustment);
  
                      // set the previous value
                      previous = current;
  
                      $(this).parent('div:eq(0)').find('.spent').text(current);
  
                      calculateSpent();
  
                  }
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <h2>Html</h2>
  
  <pre><code>&lt;p class="ui-state-default ui-corner-all" style="padding: 4px; margin-top: 4em;"&gt;
      &lt;span style="float: left; margin: -2px 5px 0 0;"&gt;&lt;/span&gt;Distribution
  &lt;/p&gt;
      &lt;strong&gt;Total Points Spendable: &lt;/strong&gt;&lt;div id="spendable"&gt;1000&lt;/div&gt;
      &lt;strong&gt;Total Points Spent (Attempted): &lt;/strong&gt;&lt;div id="attemptedToSpend"&gt;0&lt;/div&gt;
      &lt;strong&gt;Total Points Spent: &lt;/strong&gt;&lt;div id="spent"&gt;0&lt;/div&gt;
      &lt;strong&gt;Change: &lt;/strong&gt;&lt;div id="change"&gt;0&lt;/div&gt;
      &lt;div id="status"&gt;&lt;/div&gt;
  
  &lt;div id="eq"&gt;
      &lt;div style="margin: 15px;" id="test1"&gt;Test1&lt;/div&gt;
      &lt;br /&gt;
      &lt;div class="slider"&gt;&lt;/div&gt;&lt;span class="spent"&gt;0&lt;/span&gt;
  
      &lt;div style="margin: 15px;" id="test2"&gt;Test2&lt;/div&gt;
      &lt;br /&gt;
      &lt;div class="slider"&gt;&lt;/div&gt;&lt;span class="spent"&gt;0&lt;/span&gt;
  
      &lt;div style="margin: 15px;" id="test3"&gt;Test3&lt;/div&gt;
      &lt;br /&gt;
      &lt;div class="slider"&gt;&lt;/div&gt;&lt;span class="spent"&gt;0&lt;/span&gt;
  
      &lt;div style="margin: 15px;" id="test4"&gt;Test4&lt;/div&gt;
      &lt;br /&gt;
      &lt;div class="slider"&gt;&lt;/div&gt;&lt;span class="spent"&gt;0&lt;/span&gt;
  
      &lt;div style="margin: 15px;" id="test5"&gt;Test5&lt;/div&gt;
      &lt;br /&gt;
      &lt;div class="slider"&gt;&lt;/div&gt;&lt;span class="spent"&gt;0&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>