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

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

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

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

Плюсы:

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

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

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

Баг heterogeneity

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Связанные списки select с получением данных по ajax

Декабрь 15, 2016 г.

В прошлый раз я показывал как можно "на лету" создавать списки html select, данные которых содержались в специальном javascript массиве. Подготовить ...

Читать

Анимация смены картинок с помощью jquery

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

Ещё одна типовая задача, для которой найдено приличное решение. Типично суть задачи состоит в следующем. Есть набор изображений, которые демонстрируются поочередно в некотором контейнере. Ставится задача по анимации периодической смены этих картинок средствами ...

Читать

 

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

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



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