JQuery UI Slider z krokami nieliniowymi/wykładniczymi/logarytmicznymi

Question

Jestem nowicjuszem w JavaScript i JQuery, próbuję użyć suwaka JQuery UI, aby zastąpić pola wyboru zakresu cen (jeden dla ceny minimalnej, drugi dla ceny maksymalnej) dla jedna z moich stron.

Tu jest mój bieżący kod:

zakres

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

Cena wynosi od 0 do 2500,000. Po testach dowiedziałem się, że UX będzie lepszy, jeśli suwak skaluje się nieliniowo, ponieważ większość użytkowników mojej witryny przeszukałaby zakres od 25 000 do 200 000.

Bardzo mała część suwaka powinna pokazywać zakres od 0 do 25000, z czego 70% pokazuje od 25 000 do 200 000, a reszta powinna pokazywać 200 000 i więcej. Nie chcę go do przystawki do stałych wartości, ale kroki musi być 1000.

znalazłem dwa rozwiązania na tej stronie:
1) Logarithmic slider < - Rozwiązanie nie została oparta na interfejsie użytkownika przy użyciu JQuery suwak, więc naprawdę nie wiem, jak zastosować do mojego kodu.
2) JQuery Slider, how to make "step" size change < - Nie mogę go zdobyć ani ogona, gdy facet zaczął używać prawdziwych wartości i wartości jako części rozwiązania. Próbowałem zastosować do mojego kodu, suwak działa dobrze (chociaż przesunęła się zbyt szybko pod koniec na mój gust), ale tekst nie pokazał.

Wszelkie pomysły?

Answer 1

Możesz przyjąć następujące podejście: użyj zakresu suwaków 0-100, niż oblicz wartości. Z HTML:

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

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

przykładu Fiddle.