jquery ui slider, stop sliding if certain conditions are met

Question

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.

<script type="text/javascript">
    $(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 < 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);
                    });
                }
            });
        });

Answer 1

Try:

.....

slide: function (event, ui) {
                    // set the current value to whatever is selected.
                    current = ui.value;
                    if(current > 300){
                       current = 300; //otherwise, it's stuck at 301
                       return false;
                     }

                   ....rest of your code