jQuery плагин для ввода диапазона значений

Подбирал плагин, реализующий компонент для выбора диапазона чисел. Перебрал не мало «добра», были и некоторые довольно свежие плагины, но остановил свой выбор на стареньком уже не поддерживаемом с 2012 г. проекте.

http://egorkhmelev.github.io/jslider/

Выбор связан с поддержкой «нелинейной», а точнее разно-масштабной шкалы. Остальные из рассмотренных плагинов отображают только линейную шкалу.

Плюсы:

  • Можно совмещать несколько масштабов на одной шкале;
  • Есть режим работы как с диапазоном так и одним значением;
  • Несколько скинов в комплекте;
  • Метки на шкале не зависят от значений.

Проблемы, баги:

Была обнаружена пара багов.

Баг heterogeneity

Первый баг связан с параметром heterogeneity, который позволяет настраивать несколько масштабов на одной шкале. Параметр задаётся в виде массива значений вроде:

Где каждая пара чисел задаёт масштаб в виде ‘процент шкалы / максимальное значение‘. Было бы логично указать что то вроде

Т.е. для половины шкалы задать один масштаб, а для второй — иной. Но плагин глючит при задании точки на конце шкалы (т.е. 100%/значение).

В общем, это не мешает задать второй масштаб, но приходится указывать точку до окончания шкалы.

Баг рендеринга

Если произвести инициализацию плагина для невидимого элемента (к примеру, в скрытом слое), то рендеринг произойдет с ошибками.

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

Инициализацию нужно выполнять только на видимых контейнерах.

Подключение плагина jSlider

jSlider имеет кучу зависимостей, потому обратите внимание на порядок подключения скриптов:

Инициализация контейнера

Плагин цепляется к контейнеру типа <input>. Установленное заранее значение должно показывать режим: ввод диапазона или одного числа.

Ввод одного числа:

Ввод диапазона:

Инициализация:

Без каких либо параметров вы получите вот такой вариант:

Параметры и примеры использования смотрите на сайте плагина на гитхаб.

Написать комментарий

Мало букафф? Читайте есчо !

Сообщение Cannot read property 'msie' of undefined

Апрель 13, 2017 г.

Два вероятных случая могут генерировать данное сообщение в консоли браузера. Раннее обращение к js плагину Те или иные свойства могут быть недоступны, если вы обращаетесь к методам и свойствам до того как они определены. В данном случае обращение ...

Читать

Когда jQuery.find может не работать

Декабрь 8, 2012 г.

Обычно, "проблема" возникает с данными, получаемыми через асинхронные запросы (ajax-запрос). Вы пытаетесь выполнить jQuery.find() для полученных данных, а функция возвращает пустой объект. В примере ниже, мы пытаемся извлечь содержимое HTML контейнера ...

Читать

 

Комментарии к «jQuery плагин для ввода диапазона значений»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: