FM / ion.rangeSlider

/home/wespack/public_html/admin/vendors/ion.rangeSlider/

/home/wespack/public_html/admin/vendors/ion.rangeSlider

Name	Size	Mode	Actions
css/	-	0755	rm
img/	-	0755	rm
js/	-	0755	rm
_tmp/	-	0755	rm
.bower.json	1089	0644	edit dl rm
.gitignore	5	0644	edit dl rm
.npmignore	61	0644	edit dl rm
bower.json	943	0644	edit dl rm
history.md	3188	0644	edit dl rm
index.md	3017	0644	edit dl rm
package.json	1461	0644	edit dl rm
readme.md	17456	0644	edit dl rm
readme.ru.md	24466	0644	edit dl rm

Edit: /home/wespack/public_html/admin/vendors/ion.rangeSlider/readme.ru.md (24466B)

![ion.rangeSlider](_tmp/logo-ion-range-slider.png)

> <a href="readme.md">English description</a> | Описание на русском

Удобный, гибкий и отзывчивый слайдер диапазонов

***

* Версия: 2.1.4
* <a href="http://ionden.com/a/plugins/ion.rangeSlider/index.html">Страница проекта и демо</a>
* <a href="http://ionden.com/a/plugins/ion.rangeSlider/ion.rangeSlider-2.1.4.zip">Загрузить ZIP-архив</a>

## Описание
* Ion.RangeSlider — классный, удобный, отзывчивый и легко настраиваемый слайдер диапазонов
* Слайдер поддерживает события и публичные методы, имеет гибкие настройки, может быть полностью видоизменен через CSS
* Кроссбраузерная поддержка: Google Chrome, Mozilla Firefox 3.6+, Opera 12+, Safari 5+, Internet Explorer 8+
* Плагин поддерживает устройства с touch-экраном (iPhone, iPad, Nexus, etc.)
* <a href="https://github.com/IonDen/ion.rangeSlider">Репозиторий на GitHub</a>
* Плагин свободно распространяется на условиях <a href="http://ionden.com/a/plugins/licence.html" target="_blank">лицензии MIT</a>
* Используюя этот плагин, вы сможете создавать крутейшие слайдеры диапазонов, такие как этот:

![ion.rangeSlider](http://ionden.com/a/plugins/ion.rangeSlider/static/img/ion-range-slider.png)

## Ключевые особенности
* Поддержка скинов. (5 скина в комплекте и PSD для изготовления собственных)
* Неограниченное кол-во слайдеров на одной странице без существенных потерь производительности и конфликтов между ними
* Два режима работы с 1 или 2 ползунками
* Поддержка отрицательных и дробных значений
* Возможность редактировать шаг и привязывать сетку к шагу
* Можно использовать собственный массив значений для слайдера
* Настраиваемая сетка значений
* Отключаемые элементы интерфейса (мин. и макс. значение, текущие значение, сетка)
* Постфиксы и префиксы для указания единиц измерения ($20, 20 &euro; и т.п.)
* Дополнительный постфикс для максимального значения (например $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

Не забываем про скин. 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

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

Создаем базовое поле <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>

## Миграция с версии 1.x на 2.x
* Все параметры (кроме функций) теперь записываются так: <b>param_name</b>, а не paramName
* Изменились названия некоторых параметров: hasGrid &rarr; <b>grid</b>, onLoad &rarr; <b>onStart</b>
* Изменился формат объекта с данными слайдера, возвращаемый в колбэки. Например: fromNumber &rarr; <b>from</b>
* Слайдер теперь постоянно записывает свои значения в поле value и в атрибуты data-from и data-to

## <a href="http://jsfiddle.net/IonDen/qv6yrjrv/" target="_blank">Площадка для эксперементов с плагином</a>

## Настройка

<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 &rarr; 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 &rarr; 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 у базового input-элемента</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,    // индекс ОТ массива values (если используется)
    "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();
```

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

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

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

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

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

### <a href="history.md">История обновлений</a>

***

#### Поддержите разработку плагинов серии Ion:

* Пожертвовать через сервис Pledgie: [![](https://pledgie.com/campaigns/25694.png?skin_name=chrome)](https://pledgie.com/campaigns/25694)

* Пожертвовать напрямую через Paypal: https://www.paypal.me/IonDen

* Пожертвовать напрямую через Яндекс.Деньги: http://yasobe.ru/na/razrabotku

![ion.rangeSlider](_tmp/logo-ion-range-slider.png) > 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 * Используюя этот плагин, вы сможете создавать крутейшие слайдеры диапазонов, такие как этот: ![ion.rangeSlider](http://ionden.com/a/plugins/ion.rangeSlider/static/img/ion-range-slider.png) ## Ключевые особенности * Поддержка скинов. (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 1.8.x+ ## Использование Подключаем библиотеки: * 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": ```html ``` Чтобы запустить слайдер, вызовите ionRangeSlider для нужного элемента: ```javascript $("#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 и передается коллбэк первым аргументом: ```javascript 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 параметрами Пример ```javascript $("#example").ionRangeSlider({ min: 0, max: 10000, from: 1000, to: 9000, type: 'double', prefix: "$", grid: true, grid_num: 10 }); ``` Слайдер с параметрами можно также инициализировать используя атрибуты data-* у тэга input: ```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(); ``` Всего существует 3 публичных метода: ```javascript // UPDATE - обновляет значения слайдера (можно менять любые значения) slider.update({ from: 300, to: 400 }); // RESET - сбрасывает слайдер к исходным значениям slider.reset(); // DESTROY - убивает слайдер и восстанавливает исходный input slider.destroy(); ``` ## Еще раз взглянем на демо * Базовые настройки * Расширенные настройки * Взаимодействия В демках есть примеры использования всех опций слайдера ### История обновлений *** #### Поддержите разработку плагинов серии Ion: * Пожертвовать через сервис Pledgie: [![](https://pledgie.com/campaigns/25694.png?skin_name=chrome)](https://pledgie.com/campaigns/25694) * Пожертвовать напрямую через Paypal: https://www.paypal.me/IonDen * Пожертвовать напрямую через Яндекс.Деньги: http://yasobe.ru/na/razrabotku