JQuery UI Slider với các bước phi tuyến tính/số mũ/lôgarit

Question

Tôi mới sử dụng Javascript và JQuery, tôi đang cố gắng sử dụng thanh trượt JQuery UI để thay thế các hộp thả xuống phạm vi giá (một cho Giá tối thiểu, giá khác cho Giá tối đa) một trong các trang web của tôi.

Đây là mã hiện tại của tôi:

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

Giá phạm vi là từ 0 đến 2500.000. Sau khi thử nghiệm, tôi phát hiện ra rằng UX sẽ tốt hơn nếu thanh trượt không cân bằng vì hầu hết người dùng trên trang web của tôi sẽ tìm kiếm trong khoảng từ 25.000 đến 200.000.

Một phần rất nhỏ của thanh trượt sẽ hiển thị phạm vi từ 0 đến 25000, 70% trong số đó hiển thị 25.000 đến 200.000 trong khi phần còn lại sẽ hiển thị 200.000 trở lên. Tôi không muốn nó snap vào giá trị cố định nhưng các bước phải là 1000.

tôi thấy hai giải pháp trên trang web này:
1) Logarithmic slider < - Giải pháp không dựa trên bằng cách sử dụng giao diện người dùng JQuery thanh trượt nên tôi không thực sự biết cách áp dụng mã của mình.
2) JQuery Slider, how to make "step" size change < - Tôi không thể làm cho đầu hoặc đuôi của nó sau khi chàng trai bắt đầu sử dụng truevalues ​​và các giá trị như là một phần của giải pháp. Tôi đã thử áp dụng cho mã của tôi, thanh trượt hoạt động tốt (Mặc dù di chuyển quá nhanh về phía cuối cho hương vị của tôi) nhưng văn bản không hiển thị.

Bất kỳ ý tưởng nào?

Answer 1

Bạn có thể thực hiện phương pháp này: sử dụng phạm vi thanh trượt 0-100, so với giá trị tính toán. Với html:

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

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

Ví dụ Fiddle.