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

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

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

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

Плюсы:

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

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

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

Баг heterogeneity

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

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

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

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

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

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

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

Я поправил этот баг, описание и измененный jquery.jslider.js можно скачать вот тут.

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

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

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

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

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

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

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

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

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

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

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

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

Подключаем fancybox в Drupal 6

Сентябрь 1, 2013 г.

Fancybox - известный плагин jQuery для создания эффекта "просмотра в окошке". Давайте подключим его в 6-ю версию Drupal. Ряд "деятелей" предлагают поставить для этой цели, кроме самой библиотеки, ещё два плагина - jquery_update и fancybox. Определенный ...

Читать

Установка значения атрибута HTML DOM элемента средствами js

Декабрь 17, 2018 г.

При работе с HTML документом из JavaScript одной из типовых операций является установка значения того или иного атрибута выбранного контейнера (тега). Vanila JS В чистом js (vanila) значение атрибута можно установить следующим образом: [crayon-5da887d647d8b034762288/] ...

Читать

 

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

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



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