jQuery UI Slider - максимальное значение (не конец слайдера) - PullRequest
Новая
       14

jQuery UI Slider - максимальное значение (не конец слайдера)

0 голосов
/ 27 декабря 2011

У меня есть ступенчатый слайдер с нелинейными шагами -

код: 

$(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;
    }

Вот мой рисунок слайдера:

slider

У меня минимальное значение установлено на 5 на графике, но я пытаюсь установить максимальное значение (значение и положение), чтобы остановиться на 150 на графике.Независимо от того, что я пробовал, ползунок переходит к полному концу слайдера, и я всегда хочу, чтобы он остановился на 150.

Есть идеи?

1 Ответ

1 голос
/ 27 декабря 2011

Проблема заключается в ваших values и trueValues массивах и в том, как вы обрабатываете их в функции getRealValue(). Вы переопределяете значения по умолчанию для ползунка с массивом trueValues.

Мне немного непонятно, почему вы хотите и values, и trueValues. Моя интерпретация вашего кода такова: trueValues - это настройки по умолчанию для ползунка, а values - это определенные пользователем значения.

То, что вы хотите сделать, это .concat() values и trueValues в один массив и использовать этот новый массив для значений ползунка. Вы должны оставить range: 'min' и, возможно, установить max: 160 и min: -5, чтобы слайдер хорошо отображался.

Вот рабочий jsFiddle .

...