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

Question

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

Первый - это Jquery.Версия пользовательского интерфейса : 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 по своему усмотрению и т.д.

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

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

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

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

• Очевидно, что массив значений - это любые шаги, которые вы хотите использовать для своих целей.
• Также очевидно, что приведенный выше код предполагает наличие div с идентификатором "slider" для работы.
• Вероятно, это будет работать странно, если ваши минимальные / максимальные значения не совпадают с вашими минимальными / максимальными значениями для слайдера (я бы предложил просто использовать "min:значения [0], макс.:значения [значения.длина - 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