Cursore UI JQuery con passi non lineari/esponenziali/logaritmici

Question

Sono nuovo di Javascript e JQuery, sto provando a utilizzare lo slider dell'interfaccia utente JQuery per sostituire le caselle a discesa dell'intervallo di prezzo (una per il prezzo minimo, un'altra per il prezzo massimo) per uno dei miei siti

Ecco il mio codice corrente:

gamma

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

Il prezzo è da 0 a 2500.000. Dopo i test ho scoperto che UX sarà migliore se il dispositivo di scorrimento scala in modo non lineare, poiché la maggior parte degli utenti del mio sito eseguirà una ricerca nell'intervallo compreso tra 25.000 e 200.000.

Una porzione molto piccola del dispositivo di scorrimento deve mostrare l'intervallo da 0 a 25000, il 70% di esso mostra da 25.000 a 200.000 mentre il resto deve mostrare 200.000 e oltre. Non voglio a scattare a valori fissi, ma i passi deve essere 1000.

ho trovato due soluzioni su questo sito:
1) Logarithmic slider < - La soluzione non è stata basata su utilizzando l'interfaccia utente JQuery slider quindi non so davvero come applicare nel mio codice.
2) JQuery Slider, how to make "step" size change < - Non riesco a farmi testa o croce dopo che il ragazzo ha iniziato a usare valori e valori come parte della soluzione. Ho provato ad applicare al mio codice, il cursore funziona bene (anche se spostato troppo velocemente verso la fine per i miei gusti) ma il testo non ha mostrato.

Qualche idea?

Answer 1

È possibile adottare questo approccio: utilizzare l'intervallo di scorrimento 0-100, rispetto ai valori di calcolo. Con html:

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

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

Esempio Fiddle.