Question

I have a problem with jQuery-UI sliders ( http://jqueryui.com/demos/slider/#default ).
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…

JS 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 < 0){
        $(".vChanger").slider({ range: pula });
    }

    for (value in slidersValues) {
        sum += slidersValues[value];
        $("#"+value+"Info").text(slidersValues[value]);
    }

    var pula = 1500-sum;
    $("#pula").text(pula);
}

HTML:

<div id="addMapPage">
    <ul>
        <li><span>Woda:</span><div class="vChanger" id="water"></div><span id="waterInfo"><span/></li>
        <li><span>Step:</span><div class="vChanger" id="steppe"></div><span id="steppeInfo"><span/></li>
        <li><span>Bagno:</span><div class="vChanger" id="swamp"></div><span id="swampInfo"><span/></li>
        <li><span>Pustynia:</span><div class="vChanger" id="desert"></div><span id="desertInfo"><span/></li>
        <li><span>Las:</span><div class="vChanger" id="forest"></div><span id="forestInfo"><span/></li>
        <li><span>Góry:</span><div class="vChanger" id="mountain"></div><span id="mountainInfo"><span/></li>
        <li><span>Wzgórza:</span><div class="vChanger" id="hill"></div><span id="hillInfo"><span/></li>
        <li><span>Nazwa mapy:</span><input type="text" id="mapName"></input></li>
    </ul>
    <p id="mapInfo"><span id="pula"></span>Points to use</p>
    <input type="button" id="addMap" value="create map"></INPUT>
</div>

Here is example (3 screenshots):

Any ideas, how to limit points (don’t let them to be less than 0)?

Answer 1

You’ll find that adjusting the max values of your sliders is probably not a very desirable solution. It will change the scale of the increments on your slider and not be very representative of what portion of the whole the current slider value represents. Instead, intercept and prevent the slide event if the current sum of all other sliders plus the value for this event exceed the max. For instance:

var maxSum = 1500;

var $sliders = $(".slider").slider({
    value: 0,
    min: 0,
    max: 1500,
    step: 10,
    slide: function(event, ui) {
        var sum = 0;

        // Don't add the value for this slider;
        // We need to add the new value represented by the slide event
        $(".slider").not(this).each(function() {
            sum += $(this).slider("value");
        });

        // Add the slide event value
        sum += ui.value;

        if (sum > maxSum) event.preventDefault();
        else $(this).next().html("Value: " + ui.value);
    }
});

The only thing this is prone to is not pushing the values all the way to the max if the user is sliding very rapidly by large increments. See a working demo here.