Объединенное общее количество для нескольких Ползунков jQuery-UI

Question

Объединенное общее количество для нескольких Ползунков jQuery-UI

Я пытаюсь реализовать страницу, где существует 4 ползунка jQuery-UI, и я хочу сделать ее так, объединенное общее количество всех 4 ползунков никогда не будет переходить 400.

Я не возражаю, какой путь это реализовано, это может быть от 0, запускаются, и как только Вы изменяете 1 ползунок, остающиеся доступные общие уменьшения или установку ползунка мимо максимума, уменьшает значения на других ползунках.

P.S. Ползунки входят в инкременты 10.

Все идеи и предложения приветствуются, и я настроил jsFiddle, если требуется протестировать.

9

jquery jquery-ui slider range

задан Marko 15 August 2010 в 05:49

1 ответ

Другие вопросы по тегам:

jquery jquery-ui slider range

Похожие вопросы:

score 13 · Accepted Answer

Ну вот, вперед:

var sliders = $("#sliders .slider");

sliders.each(function() {
    var value = parseInt($(this).text(), 10),
        availableTotal = 400;

    $(this).empty().slider({
        value: 0,
        min: 0,
        max: 400,
        range: "max",
        step: 10,
        slide: function(event, ui) {
            // Update display to current value
            $(this).siblings().text(ui.value);

            // Get current total
            var total = 0;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });

            // Need to do this because apparently jQ UI
            // does not update value until this event completes
            total += ui.value;

            var max = availableTotal - total;

            // Update each slider
            sliders.not(this).each(function() {
                var t = $(this),
                    value = t.slider("option", "value");

                t.slider("option", "max", max + value)
                    .siblings().text(value + '/' + (max + value));
                t.slider('value', value);
            });
        }
    });
});

Вот простая демонстрация этого: http://jsfiddle.net/yijiang/Y5ZLL/4/