jQuery UI Slider-最大值（不是滑块的结尾） [英] jQuery UI Slider - max value (not end of slider)

问题描述

我有一个带有非线性步长的阶梯状滑块-

I have a stepped slider, with non-linear steps -

代码：

$(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处停下来。

I have the minimum value set to be at the 5 in the graphic, but I am trying to set the max (value & position) to stop at the 150 in the graphic. No matter what I've tried, the slider goes to the full end of the slider, and I always want it to stop short at the 150.

有什么想法吗？

推荐答案

问题出在您的值和 trueValues 数组以及在 getRealValue（）函数中的处理方式。您正在使用 trueValues 数组覆盖滑块默认值。

The problem lies with your values and trueValues arrays and how you're handling them in the getRealValue() function. You're overriding the slider defaults with the trueValues array.

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

I'm a little unclear as to why you want both values and trueValues. My interpretation of your code is that trueValues is what the slider's default values settings are, and values are some sort of user-defined values.

您想要做的是 .concat（） values 和 trueValues 放入单个数组，并将该新数组用作滑块值。您应保持范围：'min'并设置 max：160 和 min：- 5 使滑块呈现得很好。

What you want to do is .concat() values and trueValues into a single array and use that new array for the slider values. You should keep range: 'min' and perhaps set max: 160 and min: -5 to make the slider render nicely.

这里是正在使用jsFiddle 。

这篇关于jQuery UI Slider-最大值（不是滑块的结尾）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！