The jquery ui slider stops if certain conditions are met

Question

Using jQuery UI Slider, I'm trying to figure out how to do this so that the slider stops working after certain conditions are met. Any ideas? I thought that stopping the propagation of events in the "start" part would work, but ... it is not. Therefore, I am still ignorant 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 stuck at 301
                       return false;
                     }

                   ....rest of your code