JQuery Slider, wie man "Schritt" Größe ändern kann

Ist es möglich mit dem JQuery-Slider (range slider /dual-Schieberegler), um nicht-lineare (nicht konsequenten "Schritt" Größe -) Werte?

Ich will horizontalen Schieberegler Aussehen:

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

Zum Beispiel, ich möchte den folgenden JQuery-code:

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;
}

Den code oben ist nicht genau arbeiten, aber die snap to grid-Funktionalität nicht funktioniert.

InformationsquelleAutor der Frage | 2009-06-08

Nicht sicher, ob Sie möchten, dass der regler Skala im Verhältnis zu Ihrem Werte* aber wenn das so ist, habe ich eine Lösung für jemand anderes, der die gleiche Frage gestellt. Sie finden meine Lösung hier. Im Grunde nutze ich die slide Ereignis wird ausgelöst, wenn Sie den Schieberegler bewegen, um imitieren das stepping, aber basierend auf einer benutzerdefinierten array definieren der Schritte. Auf diese Weise können Sie nur "Schritt" auf Ihre vordefinierten Werte, auch wenn Sie nicht gleichmäßig verteilt sind.

*In anderen Worten, wenn Sie möchten, dass Ihre regler, um wie folgt Aussehen:

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

dann gehen Sie mit einer der anderen Lösungen hier, aber wenn Sie möchten, dass Ihre regler, um wie folgt Aussehen (Abbildung nicht maßstabsgetreu):

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

Dann die Lösung, die ich verlinkt kann mehr sein, was Sie nach.

Edit: Ok, diese version des Skripts sollte die Arbeit mit den dual-Slider:

$(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 ein wenig komisch aussieht unten ganz Links Ende, da die Sprünge so nahe beieinander im Vergleich zu der rechten Seite, aber Sie können sehen, seine stepping als erwünscht, wenn Sie verwenden Sie Ihre Tastatur Pfeile, um verschieben Sie den Schieberegler. Einzige Möglichkeit das zu umgehen, ist die änderung der Skala nicht ganz so drastisch exponentiell.

Edit 2:
Ok, wenn der Abstand ist zu übertrieben, wenn Sie die wahren Werte, Sie könnte verwenden eine Reihe von gefälschten Werte für die slider & schauen dann, bis der Reale Wert dieser entspricht, wenn Sie verwenden müssen, um den realen Wert (in einer ähnlichen Weise zu dem, was die anderen Lösungen hier vorgeschlagen). 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;
    }
});

Können Sie die Geige mit den zahlen in der values array (das sind die Schieberegler stop-Punkte), bis Sie Holen Sie Sie heraus gesperrt wie Sie wollen. Auf diese Weise können Sie machen es sich, aus der Perspektive des Benutzers, wie es ist, Schiebe proportional zu den Werten, aber ohne als übertrieben. Natürlich, wenn Sie Ihre wahren Werte werden dynamisch erstellt, müssen Sie möglicherweise zu kommen mit einem neuen Algorithmus zum generieren der Werte des Reglers, anstatt statisch zu definieren...

InformationsquelleAutor der Antwort 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]);
         }
     });
    });

InformationsquelleAutor der Antwort Bharat Parmar

7

Eine option für Sie ist, verwenden Sie eine Schrittweite ein und verweisen auf ein array mit den ausgewählten Werten. Bei 0 beginnen, gehen bis zu 20, get array[value_of_slider] um den tatsächlichen Wert. Ich weiß nicht, regler gut genug, um zu sagen ob oder nicht es ist ein Weg zu geben Sie benutzerdefinierte Werte.

InformationsquelleAutor der Antwort Seburdis

Basierend auf den obigen Antworten und Diskussion von @Seburdis, und die Namen aus deinem 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});

InformationsquelleAutor der Antwort karim79

5

Ich denke, ich kann Ihnen eine bessere Lösung:
Die Idee ist, halten Sie ein array mit meinem real-Werte, abgesehen von den regler, dann die step Attribut immer auf 1 und lassen Sie die regler arbeiten mit der index dieses array und Hole dann den realen Wert von meinem real Daten-array. Hoffe das Beispiel Hilft: http://jsfiddle.net/3B3tt/3/

InformationsquelleAutor der Antwort Broshi
4

Jemand geschrieben das auf der jQuery-website. Siehe:

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

und

http://jsbin.com/ezema

Es ist genau das, was yo müssen, aber viel einfacher (wie 1 Zeile code).

InformationsquelleAutor der Antwort Nitroware

Hier ist meine einfache Lösung für ein benutzerdefiniertes (nicht konsequenten "Schritt" - Größe) dual-slider (Sie können es ändern, um ein single-Schieberegler, wenn sich die Idee wird klar)
mein slider ist mit "slider-euro", den text-Bereich benannt ist-Betrag-euro können Sie im code sehen.
Die Idee ist, mit einem Schieberegler von 0 bis 100 und ein array ("realvalues") mit 101 Plätzen. Die Schieberegler-Wert wird verstanden als die Stelle im array. Die einzige Sache ist, dass Sie für die Referenz auf array, wenn Sie die Schieberegler-Werte.
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 )]+" €" );
    });

InformationsquelleAutor der Antwort omega

2

hier ist, wie ich meine.
demo hier - http://janpatricklara.com/web/extra/jQueryUISliderUnevenSteps.html

haben eine Reihe von gewünschten Werte
```
var amts=[50,100,150,200,225,250,300];
```
haben die Schieberegler Inkrement von 0 bis zur Länge des Arrays, mit den Schritten von 1.
Ausgang der Wert aus dem index des Arrays anstelle der Verwendung der Schieberegler, der eigentliche Wert.

diese Weise die Stufen und die Stufen sind gleichmäßig verteilt. danach können Sie einfach schnappen Sie sich den Wert des label oder speichern Sie es in einer var.
```
$('#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")]);
    }
});
```
InformationsquelleAutor der Antwort jplara

wenn min und max Wert sind die gleichen, Schieberegler-Wert ändern sich nicht

ändern Sie diesen Teil

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

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

InformationsquelleAutor der Antwort flex

1

Hatte ich, etwas ähnliches zu tun, und wenn auch das ist eine späte Reaktion, jemand anderes kann geschehen, in diesem thread genauso, wie ich es Tat, und finde meine Lösung als nützlich. Hier ist die Lösung, die ich erstellt:

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.
```
InformationsquelleAutor der Antwort Cesar

Nur die Werte ändern.

$( "#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] );

        }
    });

InformationsquelleAutor der Antwort CJ Madolara

Weiter @Broshi ist jsfiddle oben, hier ist der code für eine benutzerdefinierte Schieberegler mit range deaktiviert:

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>

InformationsquelleAutor der Antwort Eamorr

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.