我有一个阶梯式滑块,带有非线性步骤 -
代码:
$(function() {
var trueValues = [5, 10, 20, 50, 100, 150];
var values = [10, 20, 30, 40, 60, 100];
var slider = $("#parkSlider").slider({
orientation: 'horizontal',
range: "min",
value: 40,
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);
slider.slider('value', value);
$("#amount").val(getRealValue(value));
return false;
},
});
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;
}
这是我的滑块图片:
我将最小值设置为图形中的5,但我试图将max(值和位置)设置为停在图形中的150处。无论我尝试过什么,滑块都会滑到滑块的最后,我总是希望它在150处停止。
有什么想法吗?
答案 0 :(得分:1)
问题在于您的values
和trueValues
数组,以及您如何在getRealValue()
函数中处理它们。您使用trueValues
数组覆盖滑块默认值。
我有点不清楚为什么你想要values
和trueValues
。我对您的代码的解释是trueValues
是滑块的默认值设置,values
是某种用户定义的值。
您要将.concat()
values
和trueValues
放入单个数组中,并将该新数组用于滑块值。您应该保留range: 'min'
并设置max: 160
和min: -5
以使滑块呈现得很好。