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