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