Есть ли плагин или пример ползунка jquery, работающего с неравномерно делимыми значениями?

Я нашел два превосходных плагина jquery для создания слайдера для веб-формы, которые красиво ухудшаются в браузерах, которые не поддерживают javascript, и стили отключены и т.д.

Однако мне нужно создать слайдер, который не просто делит слайдер на равные части.

Например, скажем, у меня есть следующий диапазон чисел:

Я бы хотел, чтобы ползунок имел хороший большой промежуток между 800 и 1000, а затем меньшие промежутки между 1100-1500

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

Обновление:. Разбивается с помощью слайдера группы нитей и в любом случае реализует ручки с помощью слайдера JQuery. Таким образом, похоже, что modding JQuery.UI - это единственный доступный вариант. Копается в коде, чтобы узнать, могу ли я найти требуемый бит, который нужно изменить. Если в то же время у кого-нибудь есть идеи!!!

Ответы

Ответ 1

Вы можете сделать это с помощью слайдера jquery, подключившись к событию слайда (эффективно переопределив его)... Что-то вроде этого:

$(function() {
    var values = [0, 10, 50, 60, 70, 80, 90, 91, 92, 93, 94, 95, 100];
    var slider = $("#slider").slider({
        slide: function(event, ui) {
            var includeLeft = event.keyCode != $.ui.keyCode.RIGHT;
            var includeRight = event.keyCode != $.ui.keyCode.LEFT;
            slider.slider('option', 'value', findNearest(includeLeft, includeRight, ui.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;
    }
});

Должен работать для того, что вы описываете... Я тестировал его для перетаскивания мышью и используя клавиши "влево/вправо" / "домашний/конец" (очевидно, вам нужно будет изменить левый/правый вверх/вниз, если вы хотите вертикальный слайдер).

Некоторые примечания:

Очевидно, что массив значений - это любые шаги, которые вы хотите для своих целей.
Также очевидно, что в приведенном выше коде предполагается, что div с id "слайдера" будет работать.
Вероятно, это будет работать странно, если ваши значения min/max не совпадают с вашими значениями min/max для слайдера (я бы предложил просто использовать "min: values [0]", max: values [values.length - 1 ] "как ваши параметры min/max на слайдере, а затем вы всегда должны быть в безопасности).
Очевидно, что этот параметр не будет деградировать в раскрывающемся списке, но это будет очень просто сделать... просто сделайте свой выбор как обычный выпадающий список (состояние по умолчанию без javascript), а затем используйте jquery, чтобы скрыть раскрывающийся список, а также создать массив значений на основе параметров. Затем вы можете просто обновить раскрывающийся список (скрытый) одновременно с обновлением ползунка в коде выше, так что, когда ваши сообщения в форме будут выбраны, в выпадающем списке будет выбрано правильное значение.

Надеюсь, что это поможет.

Ответ 2

В Es6 вы можете найти свой ближайший номер, следуя..

function findClosest(array, value) {
  return array.sort( (a, b) => Math.abs(value - a) - Math.abs(value - b) )[0];
}

let array = [1, 5, 10, 28, 21];
let v = 4;
let number = findClosest(array, v); // -> 5