JQuery UI Slider mit Nicht-linearen/Exponentiellen/Logarithmischen Schritten

Ich bin neu in Javascript und JQuery, ich versuche zu verwenden die JQuery UI Slider zu ersetzen Preisklasse dropdown-Boxen(eine für Mindestpreis, ein Höchstpreis) für eine meiner Websites.

Hier ist mein Derzeitiger code:

$(function() {
var slider = $( "#slider-range" ).slider({
    range: true,
    min: 0,
    max: 2500000,
    step: 1000,
    values: [ 0, 2500000 ],
    slide: function( event, ui ) {
            $( "#amount" ).val( "RM " + commafy(ui.values[ 0 ]) + "  to  RM " + commafy(ui.values[ 1 ]) );
    }
});
    $( "#amount" ).val( "RM " + commafy($( "#slider-range" ).slider( "values", 0 )) +
"  to  RM " + commafy($( "#slider-range" ).slider( "values", 1 )) );
    function commafy(val) {
    return String(val).split("").reverse().join("")
                      .replace(/(.{3}\B)/g, "$1,")
                      .split("").reverse().join("");
}
});

Wird die Preisspanne von 0 bis 2500,000. Nach dem testen fand ich heraus, dass UX wird besser sein, wenn die Schieberegler-Skalen nicht Linear, wie die meisten Anwender auf meiner Seite suchen würde, zwischen 25.000 bis 200.000-Bereich.

Einen sehr winzigen Teil der Schieberegler sollte zeigen, die 0 zu 25000 range, 70% zeigen von 25.000 bis 200.000, während der rest sollte sich zeigen, 200.000 und oben. Ich möchte es nicht einrasten auf Feste Werte, aber die Schritte werden 1000.

Fand ich zwei Lösungen auf diese Seite:

1) Logarithmische regler <- Die Lösung nicht auf der Basis der Verwendung der JQuery-UI-slider, damit ich nicht wirklich wissen, wie in meinem code.

2) JQuery-Slider, wie man "Schritt" Größe ändern <- ich kann nicht Köpfe oder Schwänze der es, nachdem der Kerl angefangen mit truevalues und Werte als Teil der Lösung. Ich habe versucht, die Anwendung zu meinem code, der regler funktioniert einwandfrei (Obwohl auch bewegt sich schnell gegen Ende für meinen Geschmack), aber den text nicht zu zeigen.

Irgendwelche Ideen?

InformationsquelleAutor Kok Hsien | 2011-09-20
  1. 2

    Kann man mit diesem Ansatz: Nutzung Regelbereich 0-100, als Werte berechnen. Mit html:

    <div id="slider-range"></div>
<input id="amount" type="text" size="40" />

    und JS:

    var slider = $("#slider-range").slider({
    range: true,
    min: 0,
    max: 100,
    step: 1,
    values: [10, 80],
    slide: function (event, ui) {
        $("#amount").val("RM " + commafy(ui.values[0]) + "  to  RM " + commafy(ui.values[1]));
    }
});
$("#amount").val("RM " + commafy($("#slider-range").slider("values", 0)) +
    "  to  RM " + commafy($("#slider-range").slider("values", 1)));

function commafy(val) {
    /* Total range 0 - 2,500,000 */
    /* 70% from 25,000 to 200,000, what have left (2,325,000) share left (25,000) and right (2,300,000) */
    /* So, final dividing */
    var toPresent = 0;
    if (val < 10) {
        toPresent = (val / 10) * 25000;
    } else if (val <= 80) {
        toPresent = 25000 + (val - 10) / 70 * 175000;
    } else {
        toPresent = 200000 + (val - 80) / 20 * 2300000;
    };
    return String(toPresent).split("").reverse().join("")
        .replace(/(.{3}\B)/g, "$1,")
        .split("").reverse().join("");
}

    Beispiel Fiddle.

    InformationsquelleAutor skobaljic
Schreibe einen Kommentar