JQuery Slider，如何制作“步骤”大小变化 [英] JQuery Slider, how to make "step" size change
问题描述
是否可以使用JQuery Slider（范围滑块/双滑块）具有非线性（非一致的步长大小）值？
我想到水平滑块看起来像：
| ---- | ---- | ---- | - --- - | ---- | -------- | -------- | ------------------------- | -------------------------- | ...
0 500 750 1000 1250 1500 2000 2500 75000 100000 ...
例如，我想拥有以下JQuery代码：
var values = [0,500,750,1000,1250,1500,2000,2500,75000,100000,150000,200000,250000,300000,350000,400000,500000 ，1000000];
var slider = $（＃price-range）。slider（{
orientation：'horizontal'，
range：true，
min：0，
max：1000000，
values：[0，1000000]，
slide：function（event，ui）{
var includeLeft = event.keyCode！= $ .ui.keyCode.RIGHT;
var includeRight = event.keyCode！= $ .ui.keyCode.LEFT;
slider.slider（'option'，'value'，findNearest（includeLeft，includeRight，ui.value））;
$（＃price-amount）。html（'$'+ ui.values [0] +' - $'+ ui.values [1]）;
返回false;
}，
change：function（event，ui）{
getHomeListings（）;
}
}）;
函数findNearest（includeLeft，includeRight，value）{
var nearest = null;
var diff = null; （（包括左&&<值[i]< =值）||（包括右&& ）value {value = [value] [value]）; {
var newDiff = Math.abs（value - values [i]）;
if（diff == null || newDiff< diff）{
nearest = values [i];
diff = newDiff;
}
}
}
返回最近;
$ / code> 上面的代码并不正确，但捕捉网格功能并不工作。
不知道您是否希望滑动比例与您的值成比例*，但如果是这样，我提供了对于提出同样问题的其他人的解决方案。 您可以在此找到我的解决方案。基本上，我使用 slide 事件，该事件在您移动滑块以模仿步进时触发，但基于定义步骤的自定义数组。这样，它只允许您步进到预定义的值，即使它们不均匀分布。
*换句话说，如果您希望滑块看起来像像这样：
| ---- | ---- | ---- | ---- | - | ---- | ---- |
0 10 20 100 1000 2000 10000 20000
然后在这里使用其他解决方案，但如果你想让你的滑块看起来像这样（图表不按比例）：
| - | - | - ------ | ----------- | ----------- | ------------------- - | -------------------- |
0 10 20 100 1000 2000 10000 20000
然后我链接的解决方案可能更多你在做什么。
编辑：好的，这个版本的脚本应该可以工作与双滑块：
$（function（）{
var values = [0，500，750，1000， （$ $ $＃price-range）。滑块（{
var slider = $（＃price-range）） b $ b方向：'horizontal'，
范围：true，
最小值：0，
最大值：1000000，
值：[0，1000000]，
幻灯片：function（event，ui）{
var includeLeft = event.keyCode！= $ .ui.keyCode.RIGHT;
var includeRight = event.keyCode！= $ .ui.keyCode.LEFT;
var value = findNearest（includeLeft，includeRight，ui.value）;
if（ui.value == ui.values [0]）{
slider.slider（'values'，0，value）;
}
else {
slider.slider（'values'，1，value）; $'
$ b $（＃price-amount）。html（'$'+ slider.slider（'values'，0）+' - $'+ slider.slider（'values'，1 ））;
返回false;
}，
change：function（event，ui）{
getHomeListings（）;
}
}）;
函数findNearest（includeLeft，includeRight，value）{
var nearest = null;
var diff = null; （（包括左&&<值[i]< =值）||（包括右&& ）value {value = [value] [value]）; {
var newDiff = Math.abs（value - values [i]）;
if（diff == null || newDiff< diff）{
nearest = values [i];
diff = newDiff;
}
}
}
返回最近;
}
}）;
请注意，它的最左端看起来有点滑稽，因为跳跃比较接近到右手边，但如果使用键盘箭头移动滑块，则可以根据需要看到其步进。解决这个问题的唯一方法就是改变你的规模，使其不至于处于非常剧烈的指数状态。
编辑2 ：
好的，如果当你使用真值的时候间距太夸张，你可以使用一组伪造的值作为滑块&然后查看当您需要使用实际值时（与其他解决方案所建议的类似方式）相对应的实际值。这里是代码：
$（function（）{
var trueValues = [0，500，750，1000， 12,000,1500,2000,2500,75000,100000,150000,200000,250000,300000,350000,400000,500000,1000000];
var values = [0,1,2,3,4,5,6 ，7,10,15,20,25,30,40,50,60,75,100];
var slider = $（＃price-range）。slider（{
orientation： 'b $ b range：true，
min：0，
max：100，
values：[0，100]，
slide：function（event， ui）{
var includeLeft = event.keyCode！= $ .ui.keyCode.RIGHT;
var includeRight = event.keyCode！= $ .ui.keyCode.LEFT;
var value = findNearest（includeLeft，includeRight，ui.value）;
if（ui.value == ui.values [0]）{
slider.slider（'values'，0，value）;
}
其他{
幻灯片r.slider（'values'，1，value）;
$（＃price-amount）。html（'$'+ getRealValue（slider.slider（'values'，0））+' - $'+ getRealValue（slider.slider（ 'values'，1）））;
返回false;
}，
change：function（event，ui）{
getHomeListings（）;
}
}）;
函数findNearest（includeLeft，includeRight，value）{
var nearest = null;
var diff = null; （（包括左&&<值[i]< =值）||（包括右&& ）value {value = [value] [value]）; {
var newDiff = Math.abs（value - values [i]）;
if（diff == null || newDiff< diff）{
nearest = values [i];
diff = newDiff;
}
}
}
返回最近;
}
if（values [i]> = sliderValue（$ value） ）{
return trueValues [i];
}
}
返回0;
}
}）;
您可以调整值中的数字数组（代表滑块停止点），直到你把它们分隔开来。通过这种方式，您可以从用户的角度感觉到，它可以按比例按比例滑动，但不会过分夸大。很明显，如果你的真实值是动态创建的，你可能需要想出一个算法来生成滑块值，而不是静态定义它们。
Is it possible to use the JQuery Slider (range slider / dual slider) to have non-linear (non consistent "step" size) values?
I want to horizontal Slider to look like:
|----|----|----|----|----|--------|--------|-------------------------|--------------------------|...
0 500 750 1000 1250 1500 2000 2500 75000 100000...
For example, I want to have the following JQuery code:
var values = [0, 500, 750, 1000, 1250, 1500, 2000, 2500, 75000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 500000, 1000000];
var slider = $("#price-range").slider({
orientation: 'horizontal',
range: true,
min: 0,
max: 1000000,
values: [0, 1000000],
slide: function(event, ui) {
var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
var includeRight = event.keyCode != $.ui.keyCode.LEFT;
slider.slider('option', 'value', findNearest(includeLeft, includeRight, ui.value));
$("#price-amount").html('$' + ui.values[0] + ' - $' + ui.values[1]);
return false;
},
change: function(event, ui) {
getHomeListings();
}
});
function findNearest(includeLeft, includeRight, value) {
var nearest = null;
var diff = null;
for (var i = 0; i < values.length; i++) {
if ((includeLeft && values[i] <= value) || (includeRight && values[i] >= value)) {
var newDiff = Math.abs(value - values[i]);
if (diff == null || newDiff < diff) {
nearest = values[i];
diff = newDiff;
}
}
}
return nearest;
}
The code above is not exactly working but the snap to grid functionality doesn't work.
Not sure if you want the slider scale to be in proportion to your values* but if so, I provided a solution to this for someone else who asked the same question. You can find my solution here. Basically I make use of the slide event that gets triggered when you move the slider to mimic the stepping, but based off a custom array defining the steps. This way it only allows you to "step" to your predefined values, even if they're not evenly spread.
*In other words if you want your slider to look like this:
|----|----|----|----|----|----|----|
0 10 20 100 1000 2000 10000 20000
then go with one of the other solutions here, but if you want your slider to look like this (diagram not to scale):
|--|--|-------|-----------|-----------|--------------------|--------------------|
0 10 20 100 1000 2000 10000 20000
Then the solution I linked to may be more what you're after.
Edit: Ok, this version of the script should work with dual sliders:
$(function() {
var values = [0, 500, 750, 1000, 1250, 1500, 2000, 2500, 75000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 500000, 1000000];
var slider = $("#price-range").slider({
orientation: 'horizontal',
range: true,
min: 0,
max: 1000000,
values: [0, 1000000],
slide: function(event, ui) {
var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
var includeRight = event.keyCode != $.ui.keyCode.LEFT;
var value = findNearest(includeLeft, includeRight, ui.value);
if (ui.value == ui.values[0]) {
slider.slider('values', 0, value);
}
else {
slider.slider('values', 1, value);
}
$("#price-amount").html('$' + slider.slider('values', 0) + ' - $' + slider.slider('values', 1));
return false;
},
change: function(event, ui) {
getHomeListings();
}
});
function findNearest(includeLeft, includeRight, value) {
var nearest = null;
var diff = null;
for (var i = 0; i < values.length; i++) {
if ((includeLeft && values[i] <= value) || (includeRight && values[i] >= value)) {
var newDiff = Math.abs(value - values[i]);
if (diff == null || newDiff < diff) {
nearest = values[i];
diff = newDiff;
}
}
}
return nearest;
}
});
Note that it looks a little funny down the far left end, since the jumps are so close together compared to the right hand end, but you can see its stepping as desired if you use your keyboard arrows to move the slider. Only way to get around that is to change your scale to not be quite so drastically exponential.
Edit 2: Ok, if the spacing is too exaggerated when you use the true values, you could use a set of fake values for the slider & then look up the real value this corresponds to when you need to use the real value (in a similar way to what the other solutions here suggested). Here's the code:
$(function() {
var trueValues = [0, 500, 750, 1000, 1250, 1500, 2000, 2500, 75000, 100000, 150000, 200000, 250000, 300000, 350000, 400000, 500000, 1000000];
var values = [0, 1, 2, 3, 4, 5, 6, 7, 10, 15, 20, 25, 30, 40, 50, 60, 75, 100];
var slider = $("#price-range").slider({
orientation: 'horizontal',
range: true,
min: 0,
max: 100,
values: [0, 100],
slide: function(event, ui) {
var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
var includeRight = event.keyCode != $.ui.keyCode.LEFT;
var value = findNearest(includeLeft, includeRight, ui.value);
if (ui.value == ui.values[0]) {
slider.slider('values', 0, value);
}
else {
slider.slider('values', 1, value);
}
$("#price-amount").html('$' + getRealValue(slider.slider('values', 0)) + ' - $' + getRealValue(slider.slider('values', 1)));
return false;
},
change: function(event, ui) {
getHomeListings();
}
});
function findNearest(includeLeft, includeRight, value) {
var nearest = null;
var diff = null;
for (var i = 0; i < values.length; i++) {
if ((includeLeft && values[i] <= value) || (includeRight && values[i] >= value)) {
var newDiff = Math.abs(value - values[i]);
if (diff == null || newDiff < diff) {
nearest = values[i];
diff = newDiff;
}
}
}
return nearest;
}
function getRealValue(sliderValue) {
for (var i = 0; i < values.length; i++) {
if (values[i] >= sliderValue) {
return trueValues[i];
}
}
return 0;
}
});
You can fiddle with the numbers in the values array (which represent the slider stop points) until you get them spaced out how you want. This way you can make it feel, from the user's perspective, like it's sliding proportionally to the values, but without being as exaggerated. Obviously if your true values are dynamically created, you may need to come up with an algorithm to generate the slider values instead of statically defining them...
这篇关于JQuery Slider，如何制作“步骤”大小变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
