具有非线性/指数/对数步骤的JQuery UI滑块

我是JavaScript和JQuery的新手，我试图用JQuery UI滑块替换价格范围下拉框（一个用于最低价格，另一个用于最高价格）我的网站之一。具有非线性/指数/对数步骤的JQuery UI滑块

这里是我当前的代码：

$(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到250万辆。经过测试，我发现如果滑块非线性缩放，UX会更好，因为我网站上的大多数用户都会在25,000到200,000范围内进行搜索。

滑块的非常微小的部分应该显示0到25000的范围，其中70％显示25,000到200,000，而其余显示200,000或更高。我不希望它捕捉到固定值，但步骤必须是1000

我发现在这个网站两种解决方法：）
< - 该解决方案是不是基于使用jQuery UI滑块，所以我真的不知道如何应用到我的代码。
2）JQuery Slider, how to make "step" size change < - 在家伙开始使用真值和值作为解决方案的一部分后，我无法做出正面或反面的反应。我尝试应用我的代码，滑块工作正常（虽然移动到最后我的口味太快），但文字没有显示。

任何想法？

来源

2011-09-20 Kok Hsien

你可以采取这种方法：使用滑块范围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。

来源

2014-11-12 01:05:54 skobaljic

具有非线性/指数/对数步骤的JQuery UI滑块

回答

相关问题