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

Question

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

Первая - это версия Jquery.UI: http://ui.jquery.com/demos/slider/#steps

Второй элемент выбора для слайдера: http://www.filamentgroup.com/lab/update_jquery_ui_16_slider_from_a_select_element/

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

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

800,1000,1100,1200,1300,1400,1500

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

Таким образом, слайдер будет выглядеть примерно так:

800 ---- 1000--1100--1200--1300--1400--1500

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

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

Answer 1

Вы можете сделать это с помощью ползунка jquery, подключив событие slide (фактически переопределяя его) ... Примерно так:

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

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

Некоторые заметки:

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

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

Answer 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