具有非线性/指数/对数步长的 JQuery UI slider

Question

我是 Javascript 和 JQuery 新手，我正在尝试使用 JQuery UI Slider 替换我的一个网站的价格范围下拉框(一个用于最低价格，另一个用于最高价格)。

这是我当前的代码:

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

价格范围为0至2500,000。经过测试，我发现如果 slider 非线性缩放，用户体验会更好，因为我网站上的大多数用户都会在 25,000 到 200,000 范围之间进行搜索。

slider 的一小部分应显示 0 到 25000 范围，其中 70% 显示 25,000 到 200,000，而其余部分应显示 200,000 及以上。我不希望它捕捉到固定值，但步数必须为 1000。

我在此网站上找到了两个解决方案:
1) Logarithmic slider <- 该解决方案不是基于使用 JQuery UI slider ，因此我真的不知道如何应用到我的代码中。
2) JQuery Slider, how to make "step" size change <- 在这个人开始使用 truevalues 和 value 作为解决方案的一部分之后，我无法弄清楚它。我尝试应用于我的代码， slider 工作正常(尽管根据我的口味向末尾移动得太快)，但文本没有显示。

有什么想法吗？

Answer 1

您可以采用这种方法:使用 slider 范围 0-100，然后计算值。使用 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("");
}

示例 Fiddle .