Comment contrôler 2 montants avec un seul curseur Jquery UI

Question

Comment puis-je contrôler deux quantités avec un seul curseur ?

Voici le code que j'ai pour un curseur contrôlant un montant.

$(function() {
    $("#slider").slider({
        value:38.11,
        min: 38.11,
        max: 100,
        step: 1,
        slide: function(event, ui) {
            $("#amount").val('$' + ui.value);
        }
    });
    $("#amount").val('$' + $("#slider").slider("value"));
});

Quelqu'un peut-il m'aider ?

Answer 1

Editar Si vous voulez gérer deux valeurs avec le même curseur, en ajoutant et en soustrayant de sorte que leur total soit toujours le même, la solution est assez simple. Dans la fonction de glissement, vous devez faire quelque chose comme ceci :

$(function() {
    $("#slider").slider({
            value:38.11,
            min: 38.11,
            max: 100,
            step: 1,
            slide: function (event, ui) {
                $("#amount").val('$' + ui.value);
                $("#otheramount").val('$' + (100 - ui.value));
}
    });
    $("#amount").val('$' + $("#slider").slider("value"));
});

Voici à quoi ressemblerait la fonction complète.

Answer 2

$(function() {
        $("#slider").slider({
                value:38.11,
                min: 38.11,
                max: 100,
                step: 1,
                slide: function(event, ui) {
                        $("#amount").val('$' + ui.value);
                        $("#otherAmount").val('$' + ui.value);
                }
        });
        $("#amount").val('$' + $("#slider").slider("value"));
        $("#otherAmount").val('$' + $("#slider").slider("value"));
});

Answer 3

Je pense qu'au lieu de valeur, vous utilisez des valeurs et donnez des valeurs multiples, donc :

values: [1,5,9]

Ceci devrait aider à expliquer http://docs.jquery.com/UI/Slider#option-values