javascript - bootstrap - slider js

JQuery Slider, cómo cambiar el tamaño de "paso"

Question

¿Es posible utilizar JQuery Slider (deslizador de rango / deslizador dual) para tener valores no lineales (tamaño de paso "no consistente")?

Quiero que el control deslizante horizontal se vea así:

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

Por ejemplo, quiero tener el siguiente código de JQuery:

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

El código anterior no funciona exactamente pero la funcionalidad de ajustar a la cuadrícula no funciona.

Answer 1

Además de jsfiddle de @Broshi, aquí está el código para un control deslizante personalizado con el rango desactivado:

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>

Answer 2

Alguien publicó esto en el sitio web de jQuery. Ver:

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

y

http://jsbin.com/ezema

Es exactamente lo que tienes, pero mucho más simple (como 1 línea de código).

Answer 3

Aquí está mi solución simple para un control deslizante doble personalizado (no consistente) (se puede modificar a un solo control deslizante si la idea se vuelve clara) mi deslizador se llama "slider-euro", el área de texto es cantidad nombrada-euro como puede ver en el código. La idea es tener un control deslizante de 0 a 100 y una matriz ("valores reales") con 101 lugares. El valor deslizante se entiende como el lugar en esa matriz. Lo único es que debe hacer referencia a la matriz cuando obtiene los valores del control deslizante. Aquí está mi ejemplo:

    $(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

Basado en la respuesta y discusión de @Seburdis, y usando los nombres de su ejemplo:

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

Answer 5

Creo que puedo ofrecer una mejor solución: la idea es mantener una matriz con mis valores reales aparte del control deslizante, luego establecer el atributo de step siempre en 1 y dejar que el control deslizante trabaje con el index de esa matriz y luego buscar el real valor de mi matriz de datos reales. Espero que este ejemplo ayude: http://jsfiddle.net/3B3tt/3/

Answer 6

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

Answer 7

No estoy seguro de si desea que la escala del control deslizante sea proporcional a sus valores *, pero si es así, proporcioné una solución a esto para otra persona que hizo la misma pregunta. Puedes encontrar mi solución aquí . Básicamente, utilizo el evento de slide que se activa cuando mueve el control deslizante para imitar el paso, pero basado en una matriz personalizada que define los pasos. De esta forma, solo le permite "dar un paso" hacia sus valores predefinidos, incluso si no están distribuidos uniformemente.

* En otras palabras, si quieres que tu control deslizante se vea así:

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

luego vaya con una de las otras soluciones aquí, pero si quiere que su control deslizante se vea así (diagrama no a escala):

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

Entonces la solución a la que me he vinculado puede ser más de lo que buscas.

Editar: Ok, esta versión de la secuencia de comandos debería funcionar con dos controles deslizantes:

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

Tenga en cuenta que se ve un poco divertido en el extremo izquierdo, ya que los saltos están muy juntos en comparación con el extremo derecho, pero puede ver su paso como desee si utiliza las flechas del teclado para mover el control deslizante. La única manera de evitarlo es cambiar tu escala para que no sea tan exponencialmente tan drástica.

Edición 2: Ok, si el espaciado es demasiado exagerado cuando usa los valores verdaderos, podría usar un conjunto de valores falsos para el control deslizante y luego buscar el valor real al que corresponde cuando necesita usar el valor real (en un manera similar a lo que sugirieron las otras soluciones aquí). Aquí está el código:

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

Puede jugar con los números en la matriz de values (que representan los puntos de parada del control deslizante) hasta que los espacien como desea. De esta forma, puede hacer que se sienta, desde la perspectiva del usuario, como deslizándose proporcionalmente a los valores, pero sin ser tan exagerado. Obviamente, si sus valores verdaderos se crean dinámicamente, es posible que necesite idear un algoritmo para generar los valores del control deslizante en lugar de definirlos estáticamente ...

Answer 8

Solo cambia los valores.

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

        }
    });

Answer 9

Tuve que hacer algo similar y, a pesar de que esta es una respuesta tardía, alguien más puede pasar a este tema tal como yo lo hice y encontrar mi solución útil. Aquí está la solución que creé:

http://jsfiddle.net/YDWdu/

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

Answer 10

Una opción para usted es usar un tamaño de paso de uno y hacer referencia a un conjunto que contenga los valores seleccionados. Comienza en 0, sube a 20, obtén array [value_of_slider] para obtener tu valor real. No conozco los controles deslizantes lo suficientemente bien como para indicarle si existe o no una forma de darle un conjunto de valores personalizado.

Answer 11

así es como hice el mío. demo aquí - http://janpatricklara.com/web/extra/jQueryUISliderUnevenSteps.html

tener una variedad de sus valores deseados

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

haga que el control deslizante incremente de 0 a la longitud de la matriz, con los pasos de 1. genere el valor del índice de la matriz en lugar de usar el valor real del control deslizante.

De esta forma, los incrementos y los pasos se distribuyen de manera uniforme. después de eso, puede tomar el valor de la etiqueta o guardarla en una 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")]);
    }
});

Answer 12

si el valor mínimo y máximo es el mismo, el valor del control deslizante no cambia

cambiar esta parte

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

dentro

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