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

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

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

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

Плюсы:

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

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

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

Баг heterogeneity

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ищем видимые элементы, используя jQuery

Апрель 22, 2016 г.

В CSS такого селектора нет, в вот jQuery предоставляет. Впрочем, нужно понимать, какие объекты jQuery считает видимыми, а какие наоборот -невидимыми. К примеру, видимым будет считаться и объект с visiblity: hidden и объект с opacity: 0. Они хоть ...

Читать

Формирование связанных списков select произвольной вложенности

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

Не ослабевает интерес к вопросу о динамическом создании связанных выпадающих HTML списков. Для двух зависимых списков (я публиковал пример более 5 лет назад!) ситуация простая и понятная, но люди задают вопрос - а как развить пример для вложения 3х списков? ...

Читать

 

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

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



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