2016-04-24 16:26:11 +02:00
> <a href="readme.md">English description</a> | Описание на русском
Удобный, гибкий и отзывчивый слайдер диапазонов
***
2016-05-04 17:40:49 +02:00
* Версия: 2.1.4
2016-04-24 16:26:11 +02:00
* < a href = "http://ionden.com/a/plugins/ion.rangeSlider/index.html" > Страница проекта и демо</ a >
2016-05-04 17:40:49 +02:00
* < a href = "http://ionden.com/a/plugins/ion.rangeSlider/ion.rangeSlider-2.1.4.zip" > Загрузить ZIP-архив</ a >
2016-04-24 16:26:11 +02:00
## Описание
* Ion.RangeSlider — классный, удобный, отзывчивый и легко настраиваемый слайдер диапазонов
* Слайдер поддерживает события и публичные методы, имеет гибкие настройки, может быть полностью видоизменен через CSS
* Кроссбраузерная поддержка: Google Chrome, Mozilla Firefox 3.6+, Opera 12+, Safari 5+, Internet Explorer 8+
* Плагин поддерживает устройства с
* < a href = "https://github.com/IonDen/ion.rangeSlider" > Репозиторий на GitHub</ a >
* Плагин свободно распространяется на условиях < a href = "http://ionden.com/a/plugins/licence.html" target = "_blank" > лицензии MIT</ a >
* Используюя этот плагин, вы сможете создавать крутейшие слайдеры диапазонов, такие как этот:
## Ключевые особенности
* Поддержка скинов. (5 скина в комплекте и PSD для изготовления собственных)
* Неограниченное кол-во слайдеров на одной странице без существенных потерь производительности и конфликтов между ними
* Два режима работы с
* Поддержка отрицательных и дробных значений
* Возможность редактировать шаг и привязывать сетку к шагу
* Можно использовать собственный массив значений для слайдера
* Настраиваемая сетка значений
* Отключаемые элементы интерфейса (мин. и макс. значение, текущие значение, сетка)
* Постфиксы и префиксы для указания единиц измерения ($20, 20 € и т.п.)
* Дополнительный постфикс для максимального значения (например $0 — $100< b > +</ b > )
* Воможнось улучшить читабельность больших цифр (например 10000000 -> 10 000 000 или 10.000.000)
* Слайдер пишет свое значение прямо в value исходного поля input, что позволяет вставить сладер прямо внутрь любой формы
* Любой параметр слайдера можно так же задать через data-атрибут (например data-min="10")
* Слайдер поддерживает параметр disabled, позволяет делать слайдер неактивным
* Слайдер поддерживает внешние методы (update, reset и remove), позволяющие управлять слайдером уже после создания
* Для продвинутых пользователей есть поддержка колбэков (onStart, onChange, onFinish, onUpdate). Слайдер передает свои значения в эти функции первым аргументом в виде объекта
* Слайдер поддерживает работу с
## Демо
* < a href = "http://ionden.com/a/plugins/ion.rangeSlider/demo.html" class = "switch__item" > Базовые настройки</ a >
* < a href = "http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html" class = "switch__item" > Расширенные настройки</ a >
* < a href = "http://ionden.com/a/plugins/ion.rangeSlider/demo_interactions.html" class = "switch__item" > Взаимодействия</ a >
## Зависимости
* < a href = "http://jquery.com/" target = "_blank" > jQuery 1.8.x+</ a >
## Использование
Подключаем библиотеки:
* jQuery
* ion.rangeSlider.min.js
Подключаем стили:
* < a href = "http://necolas.github.io/normalize.css/" target = "_blank" > normalize.css</ a > (желательно, если он у
* ion.rangeSlider.css
Н е
* 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 install ionrangeslider
## Устанавливаем с
* npm install ion-rangeslider
## Инициализация
Создаем базовое поле < code > input type="text"< / code > :
```html
< input type = "text" id = "example_id" name = "example_name" value = "" / >
```
Чтобы запустить слайдер, вызовите ionRangeSlider для нужного элемента:
```javascript
$("#example_id").ionRangeSlider();
```
## Демо для новичков
Если вы новичок в веб разработке и не уверены как правильно подключить этот плагин на вашу страницу, то скачайте вот
< a href = "http://ionden.com/a/plugins/ion.rangeSlider/ionRangeSliderDemo.zip" class = "button" > этот демо пример< / a >
## Миграция с
* В с е < b > param_name</ b > , а
* Изменились названия некоторых параметров: hasGrid → < b > grid</ b > , onLoad → < b > onStart</ b >
* Изменился формат объекта с → < b > from</ b >
* Слайдер теперь постоянно записывает свои значения в поле value и в атрибуты data-from и data-to
## <a href="http://jsfiddle.net/IonDen/qv6yrjrv/" target="_blank">Площадка для эксперементов с
## Настройка
< table class = "options" >
< thead >
< tr >
< th > Атрибут< / th >
< th > По умолчанию< / th >
< th > Тип< / th >
< th > Описание< / th >
< / tr >
< / thead >
< tbody >
< tr class = "options__step" >
< td > type< div > < sup > data-type< / sup > < / div > < / td >
< td > "single"< / td >
< td > string< / td >
< td > Позволяет выбрать тип слайдера, может принимать значение < code > single< / code > - для одиночного слайдера или < code > double< / code > - для двойного слайдера< / td >
< / tr >
< tr >
< td > min< div > < sup > data-min< / sup > < / div > < / td >
< td > 10< / td >
< td > number< / td >
< td > Обозначает минимальное возможное значение слайдера.< / td >
< / tr >
< tr >
< td > max< div > < sup > data-max< / sup > < / div > < / td >
< td > 100< / td >
< td > number< / td >
< td > Обозначает максимальное возможное значение слайдера.< / td >
< / tr >
< tr >
< td > from< div > < sup > data-from< / sup > < / div > < / td >
< td > min< / td >
< td > number< / td >
< td > Позволяет задать стартовую позицию левого ползунка (или единственного ползунка)< / td >
< / tr >
< tr >
< td > to< div > < sup > data-to< / sup > < / div > < / td >
< td > max< / td >
< td > number< / td >
< td > Позволяет задать стартовую позицию правого ползунка< / td >
< / tr >
< tr class = "options__step" >
< td > step< div > < sup > data-step< / sup > < / div > < / td >
< td > 1< / td >
< td > number< / td >
< td > Задает шаг движения ползунков. Всегда больше нуля. Может быть дробным.< / td >
< / tr >
< tr >
< td > min_interval< div > < sup > data-min-interval< / sup > < / div > < / td >
< td > —< / td >
< td > number< / td >
< td > Задает минимальный диапазон между ползунками. Только для типа "double"< / td >
< / tr >
< tr class = "options__step" >
< td > max_interval< div > < sup > data-max-interval< / sup > < / div > < / td >
< td > —< / td >
< td > number< / td >
< td > Задает максимальный диапазон между ползунками. Только для типа "double"< / td >
< / tr >
< tr class = "options__step" >
< td > drag_interval< div > < sup > data-drag-interval< / sup > < / div > < / td >
< td > false< / td >
< td > boolean< / td >
< td > Разрешает пользователю перетаскивать весь диапазон. Только для типа "double" (beta)< / td >
< / tr >
< tr class = "options__step" >
< td > values< div > < sup > data-values< / sup > < / div > < / td >
< td > []< / td >
< td > array< / td >
< td > Переопределяет значения слайдера, значениями взятыми из массива values. Параметры min, max, step переопределяются автоматически.< / td >
< / tr >
< tr class = "options__new" >
< td > from_fixed< div > < sup > data-from-fixed< / sup > < / div > < / td >
< td > false< / td >
< td > boolean< / td >
< td > Фиксирует позицию левого ползунка (или единственного ползунка).< / td >
< / tr >
< tr class = "options__new" >
< td > from_min< div > < sup > data-from-min< / sup > < / div > < / td >
< td > min< / td >
< td > number< / td >
< td > Ограничивает минимальную позицию левого ползунка.< / td >
< / tr >
< tr class = "options__new" >
< td > from_max< div > < sup > data-from-max< / sup > < / div > < / td >
< td > max< / td >
< td > number< / td >
< td > Ограничивает максимальную позицию левого ползунка.< / td >
< / tr >
< tr class = "options__new" >
< td > from_shadow< div > < sup > data-from-shadow< / sup > < / div > < / td >
< td > false< / td >
< td > boolean< / td >
< td > Подсвечивает ограничения наложенные на левый ползунок.< / td >
< / tr >
< tr class = "options__new" >
< td > to_fixed< div > < sup > data-to-fixed< / sup > < / div > < / td >
< td > false< / td >
< td > boolean< / td >
< td > Фиксирует позицию правого ползунка.< / td >
< / tr >
< tr class = "options__new" >
< td > to_min< div > < sup > data-to-min< / sup > < / div > < / td >
< td > min< / td >
< td > number< / td >
< td > Ограничивает минимальную позицию правого ползунка.< / td >
< / tr >
< tr class = "options__new" >
< td > to_max< div > < sup > data-to-max< / sup > < / div > < / td >
< td > max< / td >
< td > number< / td >
< td > Ограничивает максимальную позицию правого ползунка.< / td >
< / tr >
< tr class = "options__new options__step" >
< td > to_shadow< div > < sup > data-to-shadow< / sup > < / div > < / td >
< td > false< / td >
< td > boolean< / td >
< td > Подсвечивает ограничения наложенные на правый ползунок.< / td >
< / tr >
< tr >
< td > prettify_enabled< div > < sup > data-prettify-enabled< / sup > < / div > < / td >
< td > true< / td >
< td > boolean< / td >
< td > Улучшает внешний вид длинных цифр. 10000000 → 10 000 000< / td >
< / tr >
< tr class = "options__new" >
< td > prettify_separator< div > < sup > data-prettify-separator< / sup > < / div > < / td >
< td > " "< / td >
< td > string< / td >
< td > Позволяет выбирать разделитель для улучшения читаемости длинных цифр. 10 000, 10.000, 10-000 и т.п.< / td >
< / tr >
< tr class = "options__new options__step" >
< td > prettify< div > < sup > —< / sup > < / div > < / td >
< td > null< / td >
< td > function< / td >
< td > Собственная функция для постобработки значений слайдера. Позволяет делать с < / td >
< / tr >
< tr class = "options__new options__step" >
< td > force_edges< div > < sup > data-force-edges< / sup > < / div > < / td >
< td > false< / td >
< td > boolean< / td >
< td > Заставляет слайдер всегда оставаться внутри границ своего контейнера.< / td >
< / tr >
< tr class = "options__new" >
< td > keyboard< div > < sup > data-keyboard< / sup > < / div > < / td >
< td > false< / td >
< td > boolean< / td >
< td > Активирует управление слайдером с & larr, & darr, A, S. Вправо: & rarr, & uarr, W, D.< / td >
< / tr >
< tr class = "options__new options__step" >
< td > keyboard_step< div > < sup > data-keyboard-step< / sup > < / div > < / td >
< td > 5< / td >
< td > number< / td >
< td > Шаг движения ползунка при управлении с < / td >
< / tr >
< tr >
< td > grid< div > < sup > data-grid< / sup > < / div > < / td >
< td > false< / td >
< td > boolean< / td >
< td > Включает отображение сетки значений.< / td >
< / tr >
< tr >
< td > grid_margin< div > < sup > data-grid-margin< / sup > < / div > < / td >
< td > true< / td >
< td > boolean< / td >
< td > Выравнивает сетку по крайним позициям ползунков, либо по границам контейнера.< / td >
< / tr >
< tr class = "options__new" >
< td > grid_num< div > < sup > data-grid-num< / sup > < / div > < / td >
< td > 4< / td >
< td > number< / td >
< td > Количество ячеек в сетке.< / td >
< / tr >
< tr class = "options__new options__step" >
< td > grid_snap< div > < sup > data-grid-snap< / sup > < / div > < / td >
< td > false< / td >
< td > boolean< / td >
< td > Привязка сетки к шагу слайдера (параметр step). Если активирован, то параметр grid_num не учитывается.< / td >
< / tr >
< tr >
< td > hide_min_max< div > < sup > data-hide-min-max< / sup > < / div > < / td >
< td > false< / td >
< td > boolean< / td >
< td > Прячет лейблы "min" и "max"< / td >
< / tr >
< tr class = "options__step" >
< td > hide_from_to< div > < sup > data-hide-from-to< / sup > < / div > < / td >
< td > false< / td >
< td > boolean< / td >
< td > Прячет лейблы "from" и "to"< / td >
< / tr >
< tr >
< td > prefix< div > < sup > data-prefix< / sup > < / div > < / td >
< td > —< / td >
< td > string< / td >
< td > Отобразить префикс для значений слайдера. Будет отображен перед цифрой, например $100.< / td >
< / tr >
< tr >
< td > postfix< div > < sup > data-postfix< / sup > < / div > < / td >
< td > —< / td >
< td > string< / td >
< td > Отобразить постфикс для значений слайдера. Будет отображен после цифры, например 100 р у б < / td >
< / tr >
< tr >
< td > max_postfix< div > < sup > data-max-postfix< / sup > < / div > < / td >
< td > —< / td >
< td > string< / td >
< td > Отобразить дополнительный постфикс для максимального значения слайдера. Будет отображен если один из ползунков достигнет крайнего правого значения. Например 0 — 100+< / td >
< / tr >
< tr class = "options__new" >
< td > decorate_both< div > < sup > data-decorate-both< / sup > < / div > < / td >
< td > true< / td >
< td > boolean< / td >
< td > Используется для типа "double", в случае если задан prefix и/или postfix. Определяет, как декорировать близко расположенные значения.< br / > Например: $10k — $100k или же $10 — 100k< / td >
< / tr >
< tr class = "options__new options__step" >
< td > values_separator< div > < sup > data-values-separator< / sup > < / div > < / td >
< td > " — "< / td >
< td > string< / td >
< td > Разделитель для близко расположенных значений. Используется для типа "double". Например: 10 — 100, 10 to 100, 10 + 100, 10 → 100 и т.д.< / td >
< / tr >
< tr class = "options__step" >
< td > input_values_separator< div > < sup > data-input-values-separator< / sup > < / div > < / td >
< td > " ; "< / td >
< td > string< / td >
< td > Разделитель для двойных значений в поле value у < / td >
< / tr >
< tr class = "options__step" >
< td > disable< div > < sup > data-disable< / sup > < / div > < / td >
< td > false< / td >
< td > boolean< / td >
< td > Блокирует слайдер, делает е г о < / td >
< / tr >
< tr >
< td > onStart< div > < sup > —< / sup > < / div > < / td >
< td > null< / td >
< td > function< / td >
< td > Коллбэк. Вызывается при старте слайдера.< / td >
< / tr >
< tr >
< td > onChange< div > < sup > —< / sup > < / div > < / td >
< td > null< / td >
< td > function< / td >
< td > Коллбэк. Вызывается каждый раз когда обновляются значения слайдера.< / td >
< / tr >
< tr >
< td > onFinish< div > < sup > —< / sup > < / div > < / td >
< td > null< / td >
< td > function< / td >
< td > Коллбэк. Вызывается когда пользователь заканчивает перемещать ползунок.< / td >
< / tr >
< tr class = "options__new" >
< td > onUpdate< div > < sup > —< / sup > < / div > < / td >
< td > null< / td >
< td > function< / td >
< td > Коллбэк. Вызывается когда слайдер обновляется методом < code > update< / code > или < code > reset< / code > .< / td >
< / tr >
< / tbody >
< / table >
## Описание данных передаваемых в колбэки (onChange и т.д):
Результат имеет тип object и передается коллбэк первым аргументом:
```javascript
Obj: {
"input": object, // jQuery-ссылка на input
"slider": object, // jQuery-ссылка на контейнер слайдера
"min": 0, // значение MIN
"max": 1000, // значение MAX
"from": 100, // значение О Т
"from_percent": 10, // значение О Т
"from_value": 0, // индекс О Т
"to": 900, // значение ДО (значение правого ползунка)
"to_percent": 90, // значение ДО в процентах
"to_value": 0 // индекс ДО массива values (если используется)
}
```
## Создание слайдера c параметрами
Пример
```javascript
$("#example").ionRangeSlider({
min: 0,
max: 10000,
from: 1000,
to: 9000,
type: 'double',
prefix: "$",
grid: true,
grid_num: 10
});
```
Слайдер с < code > data-*< / code > у < code > input< / code > :
```html
data-min="0"
data-max="10000"
data-from="1000"
data-to="9000"
data-type="double"
data-prefix="$"
data-grid="true"
data-grid-num="10"
```
## Публичные методы
Для того чтобы использовать публичные методы, вначале нужно записать значение слайдера в переменную::
```javascript
// Запускаем слайдер
$("#range").ionRangeSlider({
type: "double",
min: 0,
max: 1000,
from: 200,
to: 500,
grid: true
});
// Записываем инстанс в переменную
var slider = $("#range").data("ionRangeSlider");
// Запускаем публичный метод
slider.reset();
```
В с е г о
```javascript
// UPDATE - обновляет значения слайдера (можно менять любые значения)
slider.update({
from: 300,
to: 400
});
// RESET - сбрасывает слайдер к исходным значениям
slider.reset();
// DESTROY - убивает слайдер и восстанавливает исходный input
slider.destroy();
```
## Еще раз взглянем на демо
* < a href = "http://ionden.com/a/plugins/ion.rangeSlider/demo.html" class = "switch__item" > Базовые настройки</ a >
* < a href = "http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html" class = "switch__item" > Расширенные настройки</ a >
* < a href = "http://ionden.com/a/plugins/ion.rangeSlider/demo_interactions.html" class = "switch__item" > Взаимодействия</ a >
В
### <a href="history.md">История обновлений</a>
***
#### Поддержите разработку плагинов серии Ion:
* Пожертвовать через сервис Pledgie: [](https://pledgie.com/campaigns/25694)
* Пожертвовать напрямую через Paypal: https://www.paypal.me/IonDen
* Пожертвовать напрямую через Яндекс.Деньги: http://yasobe.ru/na/razrabotku
