jQuery UI Slider – 最大值(不是滑块的结尾)

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

码：

$(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.