我有一个阶梯式滑块,非线性步骤 –
码:
$(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.