不确定您是否希望滑块比例与您的值成比例*，但如果是这样，我为提出相同问题的其他人提供了解决方案。您可以在这里找到我的解决方案。基本上我利用slide当您移动滑块来模拟步进时触发的事件，但基于定义步进的自定义数组。这样，它只允许您“步进”到预定义的值，即使它们分布不均匀。
*换句话说，如果您希望滑块看起来像这样：
|----|----|----|----|----|----|----|
0 10 20 100 1000 2000 10000 20000
然后使用此处的其他解决方案之一，但如果您希望滑块看起来像这样（图表未按比例）：
|--|--|-------|-----------|-----------|--------------------|--------------------|
0 10 20 100 1000 2000 10000 20000
那么我链接到的解决方案可能更符合您的需求。
Edit:好的，这个版本的脚本应该适用于双滑块：
$(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;
}
});
请注意，它在最左端看起来有点有趣，因为与右手端相比，跳跃距离非常近，但如果您使用键盘箭头移动滑块，您可以根据需要看到它的步进。解决这个问题的唯一方法就是改变你的规模，使其不那么急剧地呈指数增长。
Edit 2:好的，如果使用真实值时间距太夸张，您可以为滑块使用一组假值，然后在需要使用真实值时查找对应的真实值（类似于这里建议的其他解决方案是什么）。这是代码：
$(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;
}
});
您可以摆弄中的数字values数组（代表滑块停止点），直到你按照你想要的方式排列它们。通过这种方式，从用户的角度来看，您可以感觉到它与值成比例地滑动，但又不会那么夸张。显然，如果您的真实值是动态创建的，您可能需要想出一种算法来生成滑块值，而不是静态定义它们......
