title: jquery ui slider, stop sliding if certain conditions are met
body: <p>Using the jQuery UI Slider, I'm trying to figure out how to make it so that the slider stops working once certain conditions are met. Any ideas? I thought stopping event propogation in the "start" part would work, but ...it doesn't. So I'm still clueless and lost. </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          var spendable = 1000;
          var spent = 0;
  
          function spend(quantity) {
  
              var remaining = spendable - quantity;
              $('#spendable').text(remaining);
          }
  
          $("#eq .slider").each(function () {
              var current = 0;
              $(this).slider({
                  range: "min",
                  step: 100,
                  value: 0,
                  min: 0,
                  max: 500,
                  animate: true,
                  orientation: "horizontal",
                  start: function (event, ui) {
                      if (spent &lt; spendable)
                          return true;
                      event.stopPropagation();
                  },
                  slide: function (event, ui) {
                      // set the current value to whatever is selected.
                      current = ui.value;
                      $(this).parent('div:eq(0)').find('.spent').text(current);
  
                      var totalled = 0;
                      $("#eq .slider").each(function () {
                          totalled += parseInt($(this).parent('div:eq(0)').find('.spent').text());
                          spend(totalled);
                      });
                  }
              });
          });
  </code></pre>