jQuery UI Slider – 最大值（不是滑块的结尾）

我有一个阶梯式滑块，非线性步骤 –

码：

$(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)) { 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 = sliderValue) { return trueValues[i]; } } return 0; } 

这是我的滑块图：

我将最小值设置为图形中的5，但我试图将max（值和位置）设置为停在图形中的150。 无论我尝试过什么，滑块都会滑到滑块的最后，我总是希望它在150处停下来。

有任何想法吗？

Answer 1

问题在于您的values和trueValues数组以及您如何在getRealValue()函数中处理它们。 您将使用trueValues数组覆盖滑块默认值。

我有点不清楚为什么你想要values和trueValues 。 我对你的代码的解释是， trueValues是滑块的默认值设置， values是某种用户定义的值。

您要做的是将.concat() values和trueValues放入单个数组中，并将该新数组用于滑块值。 您应该保持range: 'min'并且可能设置max: 160和min: -5以使滑块渲染得很好。

这是一个有效的jsFiddle 。