jQuery UI Slider - максимальное значение (не конец ползунка)

У меня ступенчатый ползунок, с нелинейными шагами -

код:

$(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.

Любые идеи?


person Jason    schedule 27.12.2011    source источник


Ответы (1)


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

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

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

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

person Josh Smith    schedule 27.12.2011
comment
'values[values.length - 1]' был удален из моего вопроса (я добавил это, когда добавлял дополнительные значения, чтобы попытаться установить максимум в позиции -1. Мой диапазон является фиксированным диапазоном только для целей стиля (изменение цвета) - person Jason; 27.12.2011
comment
Итак, что я пытаюсь сделать, это иметь максимальное инкрементное значение (а не фактическое максимальное значение ползунка. Установить максимальное значение легко, но мне нужно, чтобы ручка ползунка останавливалась до конца ползунка при остановке на отметке 150 ... - person Jason; 27.12.2011
comment
@Jason Если вы прочитаете как связанную, так и скопированную документацию, она остановится на отметке 150, если вы укажете range: true. - person Josh Smith; 27.12.2011
comment
но вы же видите, что у меня только одна ручка, а не две. Если для диапазона установлено значение true, это также мешает остальной функциональности (в том смысле, что он не скользит, поскольку я устанавливаю нелинейные приращения) - Кроме того, вам нужно прочитать остальную часть вопроса - я могу установить максимальное значение, но мне нужно установить максимальное положение ручки ползунка на отметке 150 - я проголосовал против из-за того, что вы не прочитали вопрос полностью. - person Jason; 27.12.2011
comment
В этом случае вы хотите установить range: max. - person Josh Smith; 27.12.2011
comment
правильно, но это также устанавливает самый конец ползунка как значение 150. Мне нужно установить его так, чтобы он был смещен от конца, о чем свидетельствует мой график. - person Jason; 27.12.2011
comment
Было бы очень полезно, если бы вы могли опубликовать jsFiddle этого с вашим CSS. Сейчас я играю с jsFiddle, и его трудно воспроизвести. - person Josh Smith; 27.12.2011
comment
Я сделаю это позже, я собирался сделать это сегодня утром, но у меня не хватило времени. - person Jason; 27.12.2011
comment
@ Джейсон Я думаю, что понял, чего ты хочешь, поэтому я соответствующим образом обновляю свой ответ. Дайте мне знать, если это все еще полностью выключено. - person Josh Smith; 27.12.2011
comment
АХ ха! идеальный простой ответ. Я не думал устанавливать максимальное значение на волосы выше, чем то, что я хотел, чтобы было окончательное значение. Спасибо за это. С другой стороны, причина, по которой у меня есть значения и истинные значения, заключается в том, что я могу установить нелинейные приращения (что означает неравные размеры шагов), но я все еще хочу вернуть значения из истинных значений. - person Jason; 27.12.2011
comment
@ Джейсон Потрясающе. Рад, что смог помочь. - person Josh Smith; 27.12.2011