title: How to stop jQuery sliders (bars) when range of points is emptied
body: <p>I have a problem with jQuery-UI sliders ( <a href="http://jqueryui.com/demos/slider/#default" rel="nofollow noreferrer">http://jqueryui.com/demos/slider/#default</a> ).
  I've created a couple of them on my website, and there is DIV with "points" (I entered there 1500). Each slider after increasing takes points from the DIV, so - when I increase one slider from 0 to 100, there is only 1400 points in DIV left. When I increase another slider, there will be less points in the DIV. If I decrease one of the sliders, these points will be added to the DIV - this works great.
  But... I need to disable increasing value of the sliders after points in DIV gains 0 (there can't be values less than 0), decreasing must be still available (so .slider({ disabled: true }) is not an option). I've tried almost everything, and nothing works...</p>
  
  <p>JS code:</p>
  
  <pre><code>$("#addMapPage").ready(function() {
  
      $("#addMap").click(function(){ checkMap() });
  
      $(".vChanger").slider({ step: 10,
                              max: 1500,
                              slide: function(event, ui) { checkValues() },
                              stop: function(event, ui) { checkValues() }
                              });
      checkValues();
  });
  
  function getValues() {
      var data = new Array();
      data['water'] = $("#water").slider("value");
      data['steppe'] = $("#steppe").slider("value");
      data['swamp'] = $("#swamp").slider("value");
      data['desert'] = $("#desert").slider("value");
      data['forest'] = $("#forest").slider("value");
      data['mountain'] = $("#mountain").slider("value");
      data['hill'] = $("#hill").slider("value");
      return data;
  }
  
  function checkValues() {
      var slidersValues = getValues();            //getting slider values
      var sum = 0;
      var pula = parseInt($("#pula").text());        //points to use (now can be less than 0)
  
      if (pula &lt; 0){
          $(".vChanger").slider({ range: pula });
      }
  
      for (value in slidersValues) {
          sum += slidersValues[value];
          $("#"+value+"Info").text(slidersValues[value]);
      }
  
      var pula = 1500-sum;
      $("#pula").text(pula);
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="addMapPage"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;span&gt;Woda:&lt;/span&gt;&lt;div class="vChanger" id="water"&gt;&lt;/div&gt;&lt;span id="waterInfo"&gt;&lt;span/&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Step:&lt;/span&gt;&lt;div class="vChanger" id="steppe"&gt;&lt;/div&gt;&lt;span id="steppeInfo"&gt;&lt;span/&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Bagno:&lt;/span&gt;&lt;div class="vChanger" id="swamp"&gt;&lt;/div&gt;&lt;span id="swampInfo"&gt;&lt;span/&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Pustynia:&lt;/span&gt;&lt;div class="vChanger" id="desert"&gt;&lt;/div&gt;&lt;span id="desertInfo"&gt;&lt;span/&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Las:&lt;/span&gt;&lt;div class="vChanger" id="forest"&gt;&lt;/div&gt;&lt;span id="forestInfo"&gt;&lt;span/&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Góry:&lt;/span&gt;&lt;div class="vChanger" id="mountain"&gt;&lt;/div&gt;&lt;span id="mountainInfo"&gt;&lt;span/&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Wzgórza:&lt;/span&gt;&lt;div class="vChanger" id="hill"&gt;&lt;/div&gt;&lt;span id="hillInfo"&gt;&lt;span/&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span&gt;Nazwa mapy:&lt;/span&gt;&lt;input type="text" id="mapName"&gt;&lt;/input&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;p id="mapInfo"&gt;&lt;span id="pula"&gt;&lt;/span&gt;Points to use&lt;/p&gt;
      &lt;input type="button" id="addMap" value="create map"&gt;&lt;/INPUT&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is example (3 screenshots):</p>
  
  <p><img src="https://i.stack.imgur.com/Jtlkp.png" alt="http://i.stack.imgur.com/TT84n.png"></p>
  
  <p>Any ideas, how to limit points (don't let them to be less than 0)?</p>