Виджет выбора диапазона значений

15 Ноя
2011

Для нового проекта возникла необходимость сделать трекбар с выбором диапазона значений, но с небольшой особенностью. Кроме граничных значений, должен быть еще диапазон возможных значений. Который никак не ограничивает пользователя, а служит подсказкой и показывает какие значения в данный момент доступны пользователю (на скриншоте диапазон возможных значений — это голубой слой).
Также можно ограничивать пользователя возможным диапазоном, передав нужный параметр.
Хороший пример такого трекбара реализован на яМаркете, в форме поиска (справа).

После длительных мучений получился виджет для jQuery.


Пример использования

$('.rangeInput').jRangeSelector({
	absoluteMin: -100000,
	absoluteMax: 100000,
});


Параметры

absoluteMin — минимальное значение диапазона
absoluteMax — максимальное значение диапазона
min — минимальное значение допустимого диапазона
max — максимальное значение допустимого диапазона
leftValue — начальное значение левого ползунка
rightValue — начальное значение правого ползунка
strongLimits (boolean) — если включить, то пользовтель не сможет выбрать значения за пределами возможного диапазона
float (boolean) — если включить, то минимальная единица будет равна 0,1 (по умолчанию 1)
inputName — название (атрибут «name») input’ов которые создает виджет, и записывает в них выбранный диапазон
onChange (function) — событие срабатываемое вовремя изменения значений
onChanged (function) — событие срабатываемое после изменения значений

Значения min, max, leftValue, rightValue можно изменять вызвав код инициализации:
$('.rangeInput').jRangeSelector({
	min: 0,
	max: 50000
});


Демо здесь
Исходники можно скачать здесь

P.S. Внешний вид виджета вы можете сами настроить, отредактировав файл стилей. (это мой первый пост, прошу сильно не пинать)
По материалам Хабрахабр.



загрузка...

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

Наверх