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: 160min: -5

これは動作中のjsFiddleです。

于 2011-12-27T16:30:37.793 に答える