0

我有一个阶梯式滑块，带有非线性阶梯 -

代码：

$(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，但我试图将最大值（值和位置）设置为图形中的 150。无论我尝试了什么，滑块都会到达滑块的末端，我总是希望它在 150 处停止。

有任何想法吗？

4

1 回答 1

1

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

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

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

这是一个有效的 jsFiddle。

于 2011-12-27T16:30:37.793 回答