it-swarm.dev

JQuery Slider, wie Sie die Schrittgröße ändern können

Ist es möglich, den JQuery Slider (Bereichsschieberegler/Doppelschieberegler) für nichtlineare Werte (nicht konsistente "Schrittgröße") zu verwenden?

Ich möchte den horizontalen Slider so aussehen:

|----|----|----|----|----|--------|--------|-------------------------|--------------------------|...
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 Funktion zum Einrasten an Gittern funktioniert nicht.

63
TomHankers

Ich bin mir nicht sicher, ob die Schieberegler-Skala im Verhältnis zu Ihren Werten stehen soll *, aber wenn ja, habe ich eine Lösung für jemanden bereitgestellt, der dieselbe Frage gestellt hat. Sie können meine Lösung hier finden . Grundsätzlich verwende ich das slide -Ereignis, das ausgelöst wird, wenn Sie den Schieberegler verschieben, um das Stepping zu imitieren, jedoch basierend auf einem benutzerdefinierten Array, das die Schritte definiert. Auf diese Weise können Sie nur auf Ihre vordefinierten Werte zugreifen, auch wenn diese nicht gleichmäßig verteilt sind.

* Mit anderen Worten, wenn der Slider so aussehen soll:

|----|----|----|----|----|----|----|
0   10   20  100  1000 2000 10000 20000

dann gehen Sie mit einer der anderen Lösungen hier, aber wenn Sie möchten, dass Ihr Schieberegler so aussieht (Diagramm nicht maßstabsgetreu):

|--|--|-------|-----------|-----------|--------------------|--------------------|
0 10 20     100         1000        2000               10000                20000

Dann könnte die Lösung, mit der ich verlinkt habe, mehr sein, wonach Sie suchen.


Bearbeiten: Ok, diese Version des Skripts sollte mit zwei Schiebereglern funktionieren:

$(function() {
    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;
            var value = findNearest(includeLeft, includeRight, ui.value);
            if (ui.value == ui.values[0]) {
                slider.slider('values', 0, value);
            }
            else {
                slider.slider('values', 1, value);
            }
            $("#price-amount").html('$' + slider.slider('values', 0) + ' - $' + slider.slider('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;
    }
});

Beachten Sie, dass es am linken Ende etwas komisch aussieht, da die Sprünge im Vergleich zum rechten Ende so nahe beieinander liegen. Sie können den Schritt jedoch wie gewünscht anzeigen, wenn Sie den Schieberegler mit den Tastaturpfeilen verschieben. Der einzige Weg, dies zu umgehen, besteht darin, die Skalierung so zu verändern, dass sie nicht so drastisch exponentiell ist.


Edit 2: Ok, wenn der Abstand zu groß ist, wenn Sie die wahren Werte verwenden, können Sie eine Reihe von falschen Werten für den Schieberegler verwenden und dann den tatsächlichen Wert nachschlagen, der dem entspricht, wenn Sie den tatsächlichen Wert verwenden müssen (in einem Ähnlich wie bei den anderen hier vorgeschlagenen Lösungen). Hier ist der Code:

$(function() {
    var trueValues = [0, 500, 750, 1000, 1250, 1500, 2000, 2500, 75000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 500000, 1000000];
    var values =     [0,   1,   2,    3,    4,    5,    6,    7,    10,     15,     20,     25,     30,     40,     50,     60,     75,     100];
    var slider = $("#price-range").slider({
        orientation: 'horizontal',
        range: true,
        min: 0,
        max: 100,
        values: [0, 100],
        slide: function(event, ui) {
            var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
            var includeRight = event.keyCode != $.ui.keyCode.LEFT;
            var value = findNearest(includeLeft, includeRight, ui.value);
            if (ui.value == ui.values[0]) {
                slider.slider('values', 0, value);
            }
            else {
                slider.slider('values', 1, value);
            }
            $("#price-amount").html('$' + getRealValue(slider.slider('values', 0)) + ' - $' + getRealValue(slider.slider('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;
    }
    function getRealValue(sliderValue) {
        for (var i = 0; i < values.length; i++) {
            if (values[i] >= sliderValue) {
                return trueValues[i];
            }
        }
        return 0;
    }
});

Sie können mit den Zahlen im values-Array (die die Haltepunkte des Schiebereglers repräsentieren) so lange fummeln, bis Sie sie nach Belieben auf Abstand bringen. Auf diese Weise können Sie es aus der Sicht des Benutzers fühlen, als würde es proportional zu den Werten gleiten, ohne jedoch übertrieben zu sein. Wenn Ihre wahren Werte dynamisch erstellt werden, müssen Sie offensichtlich einen Algorithmus entwickeln, um die Schiebereglerwerte zu generieren, anstatt sie statisch zu definieren.

53
Alconja

HTML:

<body>
   <p>
      Slider Value: <span id="val"></span><br/>
      Nonlinear Value: <span id="nlVal"></span><br/>
   </p>
   <div id="slider"></div>
</body>

JS:

    $(function() {
     var valMap = [0, 25,30,50,55,55,60,100];
     $("#slider").slider({
        // min: 0,
         max: valMap.length - 1,
         slide: function(event, ui) {
           $("#val").text(ui.value);
           $("#nlVal").text(valMap[ui.value]);
         }
     });
    });
13
Bharat Parmar

Eine Option für Sie ist die Verwendung einer Schrittgröße von 1 und die Referenzierung eines Arrays, das Ihre ausgewählten Werte enthält. Beginnen Sie mit 0, gehen Sie bis 20, holen Sie sich Array [value_of_slider], um Ihren tatsächlichen Wert zu erhalten. Ich kenne die Schieberegler nicht gut genug, um Ihnen zu sagen, ob es eine Möglichkeit gibt, ihr einen benutzerdefinierten Satz von Werten zu geben.

7
Seburdis

Basierend auf der obigen Antwort und Diskussion von @Seburdis und unter Verwendung der Namen aus Ihrem Beispiel:

var prices_array = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 150, 200, 250, 500, 1000, 1500, 2000, 2500, 5000, 10000];

function imSliding(event,ui)
{
    //update the amount by fetching the value in the value_array at index ui.value
    $('#amount').val('$' + prices_arr[ui.value] + ' - $' + prices_arr[prices_arr.length - 1]); 
}

$('#slider-interval').slider({ min:0, max:values_arr.length - 1, slide: imSliding});
6
karim79

Ich denke, ich kann eine bessere Lösung anbieten:. Die Idee ist, ein Array mit meinen tatsächlichen Werten vom Schieberegler getrennt zu halten, dann das Attribut step immer auf 1 zu setzen und den Schieberegler mit der Variable index des Arrays und dann arbeiten zu lassen Holen Sie den realen Wert aus meinem realen Datenfeld. Hoffe, dieses Beispiel hilft: http://jsfiddle.net/3B3tt/3/

5
Broshi

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

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

und

http://jsbin.com/ezema

Es ist genau das, was Sie haben, aber viel einfacher (wie eine Codezeile).

4
Nitroware

so habe ich meine gemacht. Demo hier - http://janpatricklara.com/web/extra/jQueryUISliderUnevenSteps.html

haben ein Array mit Ihren gewünschten Werten

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

lassen Sie den Schieberegler von 0 auf die Länge des Arrays erhöhen, und geben Sie in Schritten von 1 . den Wert aus dem Index des Arrays aus, anstatt den tatsächlichen Wert des Schiebereglers zu verwenden.

auf diese Weise werden die Schritte und Schritte gleichmäßig verteilt. Danach können Sie den Wert des Labels einfach abholen oder in einem var 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")]);
    }
});
3
jplara

Hier ist meine einfache Lösung für einen benutzerdefinierten Dual-Slider (nicht konsistente "Schrittgröße") (Sie können ihn in einen Single-Slider umwandeln, wenn die Idee klar wird) -area wird im folgenden als Betrag-Euro bezeichnet. Die Idee ist, einen Schieberegler von 0 bis 100 und ein Array ("Realwerte") mit 101 Stellen zu verwenden. Der Slider-Wert wird als der Ort in diesem Array verstanden. Die einzige Sache ist, dass Sie das Array referenzieren müssen, wenn Sie die Werte des Schiebereglers erhalten. 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 )]+" €" );
    });
2
omega

wenn min und max gleich sind, ändern sich die Werte des Schiebereglers nicht

diesen Teil ändern

        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);
            }
        }
1
flex

Ich musste etwas Ähnliches tun und auch wenn dies eine späte Antwort ist, kann jemand anderes in diesem Thread genauso vorkommen wie ich, und meine Lösung ist nützlich. Hier ist die Lösung, die ich geschaffen habe:

http://jsfiddle.net/YDWdu/

So apparently, postings containing links to jsfiddle "must be accompanied by code".
OK - here ya go, stackoverflow... Some lovely "code" for you.
1
Cesar

Weiter zu @ Broshis jsfiddle oben, hier der Code für einen benutzerdefinierten Schieberegler mit deaktiviertem Bereich:

jQuery:

var myData = [1,2,3,4,5,6,7,8,9,10,20,30,40,50,60,70,80,90,100,200,300,400,500,600,700,800,900,1000,2000,3000,4000,5000,10000,20000,30000,50000,100000,200000,500000,1000000,20000000,30000000];
slider_config = {
        range: false,
        min: 0,
        max: myData.length - 1,
        step: 1,
        slide: function( event, ui ) {
            // Set the real value into the inputs
            console.log(ui);
            $('#value').val( myData[ ui.value ] );
        },
        create: function() {
            $(this).slider('value',0);
        }
    };

$("#slider").slider(slider_config);

HTML:

<input id="value" />
<div id="slider"></div>
0
Eamorr

Ändern Sie einfach die Werte.

$( "#price-range" ).slider({
        range: true,
        min: 1000,
        max: 300000000,
        /*step:1,*/
        values: [ 1000, 300000000 ],
        slide: function( event, ui ) {
            if(ui.values[0]<=100000 && ui.values[1]<=100000){
                $("#price-range").slider({step:10000});
            }else if(ui.values[0]<=300000 && ui.values[1]<=300000){
                $("#price-range").slider({step:25000});
            }else if(ui.values[0]<=1000000 && ui.values[1]<=1000000){
                $("#price-range").slider({step:50000});
            }else if(ui.values[0]<=2000000 && ui.values[1]<=2000000){
                $("#price-range").slider({step:100000});
            }else if(ui.values[0]<=5000000 && ui.values[1]<=5000000){
                $("#price-range").slider({step:250000});
            }else if(ui.values[0]<=10000000 && ui.values[1]<=10000000){
                $("#price-range").slider({step:500000});
            }else if(ui.values[0]<=20000000 && ui.values[1]<=20000000){
                $("#price-range").slider({step:1000000});
            }else if(ui.values[0]<=50000000 && ui.values[1]<=50000000){
                $("#price-range").slider({step:5000000});
            }else if(ui.values[0]<=50000000 && ui.values[1]<=50000000){
                $("#price-range").slider({step:10000000});
            }else if(ui.values[0]<=200000000 && ui.values[1]<=200000000){
                $("#price-range").slider({step:25000000});
            }else{
                $("#price-range").slider({step:100000000});
            }

            $("#mins").val( ui.values[0] );
            $("#maxs").val( ui.values[1] );

        }
    });
0
CJ Madolara