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

absoluteMin — минимальное значение диапазона
absoluteMax — максимальное значение диапазона
min — минимальное значение допустимого диапазона
max — максимальное значение допустимого диапазона
leftValue — начальное значение левого ползунка
rightValue — начальное значение правого ползунка
strongLimits (boolean) — если включить, то пользовтель не сможет выбрать значения за пределами возможного диапазона
float (boolean) — если включить, то минимальная единица будет равна 0,1 (по умолчанию 1)
inputName — название (атрибут «name») input'ов которые создает виджет, и записывает в них выбранный диапазон
onChange (function) — событие срабатываемое вовремя изменения значений
onChanged (function) — событие срабатываемое после изменения значений
Значения min, max, leftValue, rightValue можно изменять вызвав код инициализации:
Демо здесь
Исходники можно скачать здесь
P.S. Внешний вид виджета вы можете сами настроить, отредактировав файл стилей. (это мой первый пост, прошу сильно не пинать)
Также можно ограничивать пользователя возможным диапазоном, передав нужный параметр.
Хороший пример такого трекбара реализован на яМаркете, в форме поиска (справа).
После длительных мучений получился виджет для 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. Внешний вид виджета вы можете сами настроить, отредактировав файл стилей. (это мой первый пост, прошу сильно не пинать)