我是 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,而其余部分应显示 200,000 及以上。我不希望它捕捉到固定值,但步数必须为 1000。
我在这个网站上找到了两个解决方案:
1)对数滑块<-该解决方案不是基于使用 JQuery UI 滑块,所以我真的不知道如何应用到我的代码中。
2)JQuery Slider,如何改变“步长”大小<-在这家伙开始使用真值和值作为解决方案的一部分之后,我无法做出正面或反面。我尝试应用到我的代码,滑块工作正常(虽然对我的口味来说移动得太快了)但文本没有显示。
有任何想法吗?