JQuery Slider, wie man die Änderung der "Schritt" Größe macht

Question

Ist es möglich, den JQuery Slider (Bereichsregler / Doppelschieberegler) zu verwenden, um nicht-lineare (nicht gleichmäßige "Schritt" Größe) Werte zu haben?

Ich möchte, dass der horizontale Schieberegler so aussieht:

|----|----|----|----|----|--------|--------|-------------------------|--------------------------|...
0   500  750  1000  1250 1500     2000     2500                      75000                      100000...

Zum Beispiel möchte ich den folgenden JQuery-Code haben:

var values = [0, 500, 750, 1000, 1250, 1500, 2000, 2500, 75000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 500000, 1000000];
var slider = $("#price-range").slider({
    orientation: 'horizontal',
    range: true,
    min: 0,
    max: 1000000,
    values: [0, 1000000],
    slide: function(event, ui) {
            var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
            var includeRight = event.keyCode != $.ui.keyCode.LEFT;
            slider.slider('option', 'value', findNearest(includeLeft, includeRight, ui.value));
            $("#price-amount").html('$' + ui.values[0] + ' - $' + ui.values[1]);
            return false;
    },
    change: function(event, ui) { 
        getHomeListings();
    }
});
function findNearest(includeLeft, includeRight, value) {
    var nearest = null;
    var diff = null;
    for (var i = 0; i < values.length; i++) {
            if ((includeLeft && values[i] <= value) || (includeRight && values[i] >= value)) {
                    var newDiff = Math.abs(value - values[i]);
                    if (diff == null || newDiff < diff) {
                            nearest = values[i];
                            diff = newDiff;
                    }
            }
    }
    return nearest;
}

Der obige Code funktioniert nicht genau, aber die Rasterausrichtungsfunktioniert nicht.

Answer 1

Jemand hat dies auf der jQuery-Website veröffentlicht. Siehe:

http://forum.jquery.com/topic/non-linear-logarithmic-or-exponential-scale-for-slider

und

http://jsbin.com/ezema

Es ist genau das, was du hast, aber viel einfacher (wie 1 Zeile Code).

Answer 2

Hier ist, wie ich es gemacht habe. Hier ist eine Demo - http://janpatricklara.com/web/extra/jQueryUISliderUnevenSteps.html

Haben Sie ein Array mit Ihren gewünschten Werten

var amts=[50,100,150,200,225,250,300];

Lassen Sie den Schieberegler von 0 bis zur Länge des Arrays inkrementieren, mit Schritten von 1. Geben Sie den Wert aus dem Index des Arrays aus, anstatt den tatsächlichen Wert des Schiebereglers zu verwenden.

Auf diese Weise sind die Inkremente und Schritte gleichmäßig verteilt. Danach können Sie einfach den Wert des Labels abrufen oder ihn in einer Variablen speichern.

$('#amtslider').slider({
    min:0,
    max:amts.length-1,
    step:1,
    value:0,
    change:function(event, ui){
        //alert(amts[$(this).slider("value")]);
        //alert($(this).slider("value"));
        $('#lbl_amt').val(amts[$(this).slider("value")]);
    },
    slide:function(event, ui){
        $('#lbl_amt').val(amts[$(this).slider("value")]);
    }
});

Answer 3

Hier ist meine einfache Lösung für einen benutzerdefinierten (nicht konsistenten "Schritt" Größe) Dual-Slider (Sie können ihn so umändern, dass es ein Einzel-Slider wird, wenn die Idee klar wird) Mein Slider heißt "slider-euro", das Textfeld ist im Code als amount-euro benannt. Die Idee ist es, einen Slider von 0 bis 100 und ein Array ("realwerte") mit 101 Plätzen zu haben. Der Slider-Wert soll als Platz in diesem Array verstanden werden. Der einzige Unterschied ist, dass Sie das Array referenzieren müssen, wenn Sie die Sliderwerte abrufen. Hier ist mein Beispiel:

$(function() {
    var realvalues = [0, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000, 15000, 20000, 25000, 30000, 35000, 40000, 45000, 50000, 55000, 60000, 65000, 70000, 75000, 80000, 85000, 90000, 95000, 100000, 105000, 110000, 115000, 120000, 125000, 130000, 135000, 140000, 145000, 150000, 155000, 160000, 165000, 170000, 175000, 180000, 185000, 190000, 195000, 200000, 205000, 210000, 215000, 220000, 225000, 230000, 235000, 240000, 245000, 250000, 255000, 260000, 265000, 270000, 275000, 280000, 285000, 290000, 295000, 300000, 310000, 320000, 330000, 340000, 350000, 360000, 370000, 380000, 390000, 400000, 450000, 500000, 550000, 600000, 650000, 700000, 750000, 800000, 850000, 900000, 1000000, 1500000, 2000000];

    $( "#slider-euro" ).slider({
    range: true,
    min: 0,
    max: 100,
    step: 1,
    values: [ 25, 50 ],
    slide: function( event, ui ) {
    $( "#amount-euro" ).val( realvalues[ui.values[ 0 ]] + " € - " + realvalues[ui.values[ 1 ]] + " €");
    }
    });
    $( "#amount-euro" ).val( realvalues[$( "#slider-euro" ).slider( "values", 0 )] + " € - " + realvalues[$( "#slider-euro" ).slider( "values", 1 )]+" €" );
    });

Answer 4

Wenn der Mindest- und der Höchstwert gleich sind, ändert sich der Schiebereglerwert nicht

Ändern Sie diesen Teil

        if (ui.value == ui.values[0]) {
            slider.slider('values', 0, value);
        }
        else {
            slider.slider('values', 1, value);
        }

in

        if ( ui.values[0] == ui.values[1] ) {
            slider.slider('values', 0, value);
            slider.slider('values', 1, value);
        }else{
            if (ui.value == ui.values[0]) {
                slider.slider('values', 0, value);
            }else {
                slider.slider('values', 1, value);
            }
        }

Answer 5

Ich musste etwas Ähnliches tun und obwohl dies eine späte Antwort ist, könnte jemand anderes genauso wie ich auf diesen Thread stoßen und meine Lösung nützlich finden. Hier ist die Lösung, die ich erstellt habe:

http://jsfiddle.net/YDWdu/

Anscheinend müssen Posts, die Links zu jsfiddle enthalten, "von Code begleitet sein".
OK - hier hast du, stackoverflow... Ein bisschen "Code" für dich.