Ion.RangeSlider 2.1.4. jQuery-plugin
Удобный, гибкий и отзывчивый слайдер диапазонов, поддерживающий скины

Обратная связь и поддержка

В случае обнаружения багов или недочетов в плагинах, воспользуйтесь разделом Issues в репозитории на GitHub

Click here to lend your support to: Nokia Lumia for plugins testing and make a donation at pledgie.com !

Реклама

Описание

  • Ion.RangeSlider — классный, удобный, отзывчивый и легко настраиваемый слайдер диапазонов
  • Слайдер поддерживает события и публичные методы, имеет гибкие настройки, может быть полностью видоизменен через CSS
  • Кроссбраузерная поддержка: Google Chrome, Mozilla Firefox 3.6+, Opera 12+, Safari 5+, Internet Explorer 8+
  • Плагин поддерживает устройства с touch-экраном (iPhone, iPad, Nexus, etc.)
  • Репозиторий на GitHub
  • Плагин свободно распространяется на условиях лицензии MIT
  • Используюя этот плагин, вы сможете создавать крутейшие слайдеры диапазонов, такие как этот:

Ключевые особенности

  • Поддержка скинов. (5 скина в комплекте и PSD для изготовления собственных)
  • Неограниченное кол-во слайдеров на одной странице без существенных потерь производительности и конфликтов между ними
  • Два режима работы с 1 или 2 ползунками
  • Поддержка отрицательных и дробных значений
  • Возможность редактировать шаг и привязывать сетку к шагу
  • Можно использовать собственный массив значений для слайдера
  • Настраиваемая сетка значений
  • Отключаемые элементы интерфейса (мин. и макс. значение, текущие значение, сетка)
  • Постфиксы и префиксы для указания единиц измерения ($20, 20 € и т.п.)
  • Дополнительный постфикс для максимального значения (например $0 — $100+)
  • Воможнось улучшить читабельность больших цифр (например 10000000 -> 10 000 000 или 10.000.000)
  • Слайдер пишет свое значение прямо в value исходного поля input, что позволяет вставить сладер прямо внутрь любой формы
  • Любой параметр слайдера можно так же задать через data-атрибут (например data-min="10")
  • Слайдер поддерживает параметр disabled, позволяет делать слайдер неактивным
  • Слайдер поддерживает внешние методы (update, reset и remove), позволяющие управлять слайдером уже после создания
  • Для продвинутых пользователей есть поддержка колбэков (onStart, onChange, onFinish, onUpdate). Слайдер передает свои значения в эти функции первым аргументом в виде объекта
  • Слайдер поддерживает работу с датой и временем

Демо

Зависимости

Использование

Подключаем библиотеки:

  • jQuery
  • ion.rangeSlider.min.js

Подключаем стили:

  • normalize.css (желательно, если он у вас еще не подключен)
  • ion.rangeSlider.css

Не забываем про скин. 5 скинов включены в архив. Выберите один:

  • ion.rangeSlider.skinFlat.css + sprite-skin-flat.png
  • ion.rangeSlider.skinHTML5.css + без картинок
  • ion.rangeSlider.skinModern.css + sprite-skin-modern.png
  • ion.rangeSlider.skinNice.css + sprite-skin-nice.png
  • ion.rangeSlider.skinSimple.css + sprite-skin-simple.png

Вы так же можете нарисовать собственный скин, воспользовавшись вложенным в архив PSD файлом (не забудьте модифицировать размеры элементов в CSS файле)

Установка с помощью bower

  • bower install ionrangeslider

Установка с помощью NPM

  • npm install ion-rangeslider

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

Создаем базовое поле input type="text".

<input type="text" id="example_id" name="example_name" value="" />

Чтобы запустить слайдер, вызовите ionRangeSlider для нужного элемента:

$("#example_id").ionRangeSlider();
Если вы новичок в веб разработке и не уверены
как правильно подключить этот плагин на вашу страницу, то скачайте вот
этот демо пример

Миграция с версии 1.x на 2.x

  • Все параметры (кроме функций) теперь записываются так: param_name, а не paramName
  • Изменились названия некоторых параметров: hasGrid → grid, onLoad → onStart
  • Изменился формат объекта с данными слайдера, возвращаемый в колбэки. Например: fromNumber → from
  • Слайдер теперь постоянно записывает свои значения в поле value и в атрибуты data-from и data-to

Параметры

Атрибут По умолчанию Тип Описание
type
data-type
"single" string Позволяет выбрать тип слайдера, может принимать значение single - для одиночного слайдера или double - для двойного слайдера
min
data-min
10 number Обозначает минимальное возможное значение слайдера.
max
data-max
100 number Обозначает максимальное возможное значение слайдера.
from
data-from
min number Позволяет задать стартовую позицию левого ползунка (или единственного ползунка)
to
data-to
max number Позволяет задать стартовую позицию правого ползунка
step
data-step
1 number Задает шаг движения ползунков. Всегда больше нуля. Может быть дробным.
min_interval
data-min-interval
number Задает минимальный диапазон между ползунками. Только для типа "double"
max_interval
data-max-interval
number Задает максимальный диапазон между ползунками. Только для типа "double"
drag_interval
data-drag-interval
false boolean Разрешает пользователю перетаскивать весь диапазон. Только для типа "double" (beta)
values
data-values
[] array Переопределяет значения слайдера, значениями взятыми из массива values. Параметры min, max, step переопределяются автоматически.
from_fixed
data-from-fixed
false boolean Фиксирует позицию левого ползунка (или единственного ползунка).
from_min
data-from-min
min number Ограничивает минимальную позицию левого ползунка.
from_max
data-from-max
max number Ограничивает максимальную позицию левого ползунка.
from_shadow
data-from-shadow
false boolean Подсвечивает ограничения наложенные на левый ползунок.
to_fixed
data-to-fixed
false boolean Фиксирует позицию правого ползунка.
to_min
data-to-min
min number Ограничивает минимальную позицию правого ползунка.
to_max
data-to-max
max number Ограничивает максимальную позицию правого ползунка.
to_shadow
data-to-shadow
false boolean Подсвечивает ограничения наложенные на правый ползунок.
prettify_enabled
data-prettify-enabled
true boolean Улучшает внешний вид длинных цифр. 10000000 → 10 000 000
prettify_separator
data-prettify-separator
" " string Позволяет выбирать разделитель для улучшения читаемости длинных цифр. 10 000, 10.000, 10-000 и т.п.
prettify
null function Собственная функция для постобработки значений слайдера. Позволяет делать с цифрами всё что угодно, например приобразовывать в даты и время.
force_edges
data-force-edges
false boolean Заставляет слайдер всегда оставаться внутри границ своего контейнера.
keyboard
data-keyboard
false boolean Активирует управление слайдером с помощью клавиатуры. Влево: &larr, &darr, A, S. Вправо: &rarr, &uarr, W, D.
keyboard_step
data-keyboard-step
5 number Шаг движения ползунка при управлении с клавиатуры. Задается в процентах.
grid
data-grid
false boolean Включает отображение сетки значений.
grid_margin
data-grid-margin
true boolean Выравнивает сетку по крайним позициям ползунков, либо по границам контейнера.
grid_num
data-grid-num
4 number Количество ячеек в сетке.
grid_snap
data-grid-snap
false boolean Привязка сетки к шагу слайдера (параметр step). Если активирован, то параметр grid_num не учитывается.
hide_min_max
data-hide-min-max
false boolean Прячет лейблы "min" и "max"
hide_from_to
data-hide-from-to
false boolean Прячет лейблы "from" и "to"
prefix
data-prefix
string Отобразить префикс для значений слайдера. Будет отображен перед цифрой, например $100.
postfix
data-postfix
string Отобразить постфикс для значений слайдера. Будет отображен после цифры, например 100 руб.
max_postfix
data-max-postfix
string Отобразить дополнительный постфикс для максимального значения слайдера. Будет отображен если один из ползунков достигнет крайнего правого значения. Например 0 — 100+
decorate_both
data-decorate-both
true boolean Используется для типа "double", в случае если задан prefix и/или postfix. Определяет, как декорировать близко расположенные значения.
Например: $10k — $100k или же $10 — 100k
values_separator
data-values-separator
" — " string Разделитель для близко расположенных значений. Используется для типа "double". Например: 10 — 100, 10 to 100, 10 + 100, 10 → 100 и т.д.
input_values_separator
data-input-values-separator
" ; " string Разделитель для двойных значений в поле value у базового input-элемента
disable
data-disable
false boolean Блокирует слайдер, делает его не активным.
onStart
null function Коллбэк. Вызывается при старте слайдера.
onChange
null function Коллбэк. Вызывается каждый раз когда обновляются значения слайдера.
onFinish
null function Коллбэк. Вызывается когда пользователь заканчивает перемещать ползунок.
onUpdate
null function Коллбэк. Вызывается когда слайдер обновляется методом update или reset.

Описание данных передаваемых в колбэки (onChange и т.д):

Результат имеет тип object и передается коллбэк первым аргументом:

Obj: {
    "input": object,    // jQuery-ссылка на input
    "slider": object,   // jQuery-ссылка на контейнер слайдера
    "min": 0,           // значение MIN
    "max": 1000,        // значение MAX
    "from": 100,        // значение ОТ
    "from_percent": 10, // значение ОТ в процентах
    "from_value": 0,    // индекс ОТ массива values (если используется)
    "to": 900,          // значение ДО
    "to_percent": 90,   // значение ДО в процентах
    "to_value": 0       // индекс ДО массива values (если используется)
}

Создание слайдера c параметрами

Пример

$("#example").ionRangeSlider({
    min: 0,
    max: 10000,
    from: 1000,
    to: 9000,
    type: 'double',
    prefix: "$",
    grid: true,
    grid_num: 10
});

Слайдер с параметрами можно также инициализировать используя атрибуты data-* у тэга input:

data-min="0"
data-max="10000"
data-from="1000"
data-to="9000"
data-type="double"
data-prefix="$"
data-grid="true"
data-grid-num="10"

Публичные методы

Для того чтобы использовать публичные методы, вначале нужно записать значение слайдера в переменную:

// Запускаем слайдер
$("#range").ionRangeSlider({
    type: "double",
    min: 0,
    max: 1000,
    from: 200,
    to: 500,
    grid: true
});

// Записываем инстанс в переменную
var slider = $("#range").data("ionRangeSlider");

// Запускаем публичный метод
slider.reset();

Всего существует 3 публичных метода:

// UPDATE - обновляет значения слайдера (можно менять любые значения)
slider.update({
    from: 300,
    to: 400
});

// RESET - сбрасывает слайдер к исходным значениям
slider.reset();

// DESTROY - убивает слайдер и восстанавливает исходный input
slider.destroy();

Еще раз взглянем на демо

В демках есть примеры использования всех опций слайдера

Скачать

Поделиться

comments powered by Disqus
Fork me on GitHub