我是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.经过测试,我发现如果滑块非线性缩放,UX会更好,因为我网站上的大多数用户都会搜索25,000到200,000之间的范围.
滑块的一小部分应显示0到25000范围,其中70％显示25,000,而其余部分显示200,000及以上.我不希望它捕捉到固定值,但步骤必须是1000.
我在这个网站上找到了两个解决方案
1)Logarithmic slider< - 解决方案不是基于使用JQuery UI滑块,所以我真的不知道如何应用到我的代码中.
2)JQuery Slider,how to make “step” size change< - 在我开始使用truevalues和值作为解决方案的一部分后,我无法做出正面或反面.我尝试应用到我的代码,滑块工作正常(尽管我的口味移动得太快)但文本没有显示. 有任何想法吗？
解决方法
您可以采用这种方法：使用滑块范围0-100,而不是计算值.用html：
<div id="slider-range"></div> <input id="amount" type="text" size="40" />
和JS：
var slider = $("#slider-range").slider({
range: true,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,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,")
.split("").reverse().join("");
}
例Fiddle.
