具有非线性/指数/对数步长的JQuery UI滑块 [英] JQuery UI Slider with Non-linear/Exponential/Logarithmic steps
问题描述
我是Java和JQuery的新手,我试图使用JQuery UI Slider替换我的一个网站的价格范围下拉框(一个代表最低价格,另一个代表最高价格).
I'm new to Javascript and JQuery, I am trying to use JQuery UI Slider to replace price range dropdown boxes(one for Minimum Price, another for Maximum Price) for one of my sites.
这是我当前的代码:
$(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之间进行搜索.
The price range is from 0 to 2500,000. After testing I found out that UX will be better if the slider scales non-linearly as most of the users on my site would search between the 25,000 to 200,000 range.
滑块的很小一部分应显示0到25000范围,其中70%显示25,000到200,000,其余应显示200,000或更高.我不希望它捕捉到固定值,但步骤必须是1000.
A very minute portion of the slider should show the 0 to 25000 range, 70% of it showing 25,000 to 200,000 while the rest should show 200,000 and above. I don't want it to snap to fixed values but the steps has to be 1000.
我在此站点上找到了两种解决方案:
1)对数滑块<-解决方案不是基于使用JQuery UI滑块的,所以我不真的不知道如何应用到我的代码中.
2) jQuery滑块,如何使步骤"大小变化<-在这个家伙开始使用truevalues和value作为解决方案的一部分之后,我无法做出改变.我尝试将其应用到代码中,但滑块可以正常工作(尽管按照我的喜好,滑块移到末尾的速度太快了),但文本没有显示.
I found two solutions on this site:
1) Logarithmic slider <- The solution wasn't based on the using the JQuery UI slider so I don't really know how to apply into my code.
2) JQuery Slider, how to make "step" size change <- I can't make heads or tails of it after the guy started using truevalues and values as part of the solution. I tried applying to my code, the slider works fine (Though moved too fast towards the end for my taste) but the text did not show.
有什么想法吗?
推荐答案
您可以采用这种方法:使用滑块范围0-100,而不是计算值.使用html:
You can take this approach: use slider range 0-100, than calculate values. With 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("");
}
示例小提琴.
这篇关于具有非线性/指数/对数步长的JQuery UI滑块的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!