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

Posted 2023-03-06

【中文标题】jQuery UI Slider - 最大值（不是滑块的结尾）

【英文标题】：jQuery UI Slider - max value (not end of slider)

【发布时间】：2012-01-28 15:04:27

【问题描述】：

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

代码：

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

有什么想法吗？

【参考方案1】：

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

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

您想要做的是将.concat() values 和trueValues 合并到一个数组中，并将该新数组用于滑块值。您应该保留range: 'min' 并可能设置max: 160 和min: -5 以使滑块呈现良好。

这是working jsFiddle。

【讨论】：

'values[values.length - 1]' 已从我的问题中删除（我补充说，当我添加额外的值以尝试将最大值设置在位置 -1 时。我的范围是仅用于样式目的的固定范围（颜色变化）

所以我想要做的是有一个最大增量值（不是滑块的实际最大值。设置最大值很容易，但我需要滑块句柄在结束时停止滑块停止在 150 标记处...

@Jason 如果您同时阅读链接和复制的文档，如果您指定 range: true，它将在 150 标记处停止。

但是你可以看到我只有一个手柄 - 而不是两个。将范围设置为 true，也会与其他功能混淆（因为它不会滑动，因为我将增量设置为非线性） - 此外，您需要阅读问题的其余部分 - 我是能够设置最大值，但我需要将滑块手柄的最大位置设置为 150 标记 - 由于您没有阅读问题的全部内容，我投了反对票。

你想设置range: max，在这种情况下。