我有一个阶梯式滑块,非线性步骤 –
码:
$(function() {
var trueValues = [5,10,20,50,100,150];
var values = [10,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,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处停下来.
有任何想法吗?
解决方法
问题在于您的值和trueValues数组以及您如何在getRealValue()函数中处理它们.您将使用trueValues数组覆盖滑块默认值.
我有点不清楚为什么你想要值和trueValues.我对你的代码的解释是,trueValues是滑块的默认值设置,值是某种用户定义的值.
您要做的是将.concat()值和trueValues放入单个数组中,并将该新数组用于滑块值.您应该保持范围:’min’并且可能设置max:160和min:-5以使滑块渲染得很好.
这是一个working jsFiddle.