readme.ru.md 24 KB
English description | Описание на русском
Удобный, гибкий и отзывчивый слайдер диапазонов
- Версия: 2.1.4
- Страница проекта и демо
- Загрузить ZIP-архив
Описание
- 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();
Еще раз взглянем на демо
В демках есть примеры использования всех опций слайдера
История обновлений
Поддержите разработку плагинов серии Ion:
Пожертвовать через сервис Pledgie:
Пожертвовать напрямую через Paypal: https://www.paypal.me/IonDen
Пожертвовать напрямую через Яндекс.Деньги: http://yasobe.ru/na/razrabotku