Ion.RangeSlider – Вот это чудо мне удалось найти на просторах интернета. Классный, удобный, нет огромного количества настроек, легко настраивается, хоть настроек у него мало, но и их вполне хватает!
Кстати данный плагин от отечественного производителя и у автора этого чуда есть еще несколько плагинов о которых я расскажу в следующих статьях.
Особенности плагина
- Кроссбраузерность: Google Chrome, Mozilla Firefox 3.6+, Opera 12+, Safari 5+, Internet Explorer 8+
- Поддерживает устройства с touch-экраном (iPhone, iPad, Nexus, etc.)
- Поддержка скинов – встроено 3 скина
- Неограниченное кол-во слайдеров на одной странице без существенных потерь производительности и конфликтов между ними
- Два режима работы с 1 или 2 ползунками
- Поддержка отрицательных и дробных значений
- Возможность редактировать шаг
- Поддержка собственного диапазона значений
- Автоматически генерируемая сетка
- Отключаемые элементы интерфейса (мин. и макс. значение, текущие значение, сетка)
- Постфиксы и префиксы для указания единиц измерения ($20, 20 € и т.п.)
- Дополнительный постфикс для максимального значения (например $0 — $100+)
- Воможнось улучшить читабельность больших цифр (например 10000000 -> 10 000 000)
- Слайдер пишет свое значение прямо в value исходного поля input, что позволяет вставить сладер прямо внутрь любой формы
- Любой параметр слайдера можно так же задать через data-атрибут (например data-min=”10″)
- Слайдер поддерживает параметр disabled, позволяет делать слайдер неактивным
- Слайдер поддерживает внешние методы (update и remove), позволяющие управлять слайдером уже после создания
- Для продвинутых пользователей есть поддержка функций обратного вызова (onLoad, onChange, onFinish). Слайдер передает свои значения в эти функции первым аргументом в виде объекта
Подключение
1 2 3 4 5 6 | <link rel="stylesheet" href="ion.rangeSlider.css"> <link rel="stylesheet" href="normalize.min.css"> <!--желательно, если он у вас еще не подключен)--> <!-- И по желанию можно подключить какой-нибудь скин который есть в архиве --> <script src="ion.rangeSlider.min.js"></script> |
Инициализация
1 | <input type="text" id="slider" name="slider" value="" /> |
1 | $("#slider").ionRangeSlider(); |
Параметры
Параметр | По умолчанию | Описание параметра |
---|---|---|
type | “single” | Не обязательный параметр, позволяет выбрать тип слайдера, может принимать значение single – для одиночного слайдера или double – для двойного слайдера |
min | 10 | Не обязательный параметр, автоматически устанавливается из атрибута value базового поля input. Например если value=”10;100″, то примет значение 10 |
max | 100 | Не обязательный параметр, автоматически устанавливается из атрибута value базового поля input. Например если value=”10;100″, то примет значение 10 |
from | min | Не обязательный параметр, по умолчанию равен значению min. Позволяет задать стартовую позицию слайдера “ОТ” |
to | max | Не обязательный параметр, по умолчанию равен значению max. Позволяет задать стартовую позицию слайдера “ДО” |
step | 1 | Не обязательный параметр, задает шаг слайдера |
prefix | Не обязательный параметр, добавляет текст до всех значений. Например prefix – “$” модифицирует значение “100” в “$100” | |
postfix | Не обязательный параметр, добавляет текст после всех значений. Например postfix – ” €” модифицирует значение “100” в “100 €” | |
maxPostfix | Не обязательный параметр, добавляет для максимального значения. Например maxPostfix – “+” модифицирует значение “100” в “100+” | |
hasGrid | false | Не обязательный параметр, включает сетку ниже слайдера (высота увеличивается на 20px и это можно настроить через CSS) |
gridMargin | 0 | Не обязательный параметр, устанавливает отсуп от края сетки до края слайдера |
hideMinMax | false | Не обязательный параметр, отключает поля Min и Max |
hideFromTo | false | Не обязательный параметр, отключает поля From и To |
prettify | true | Не обязательный параметр, позволяет разделять длинные цифры пробелами, например 10 000 вместо 10000 |
disable | false | Визуально отключает слайдер |
values | null | Массив предустановленных значений: [a, b, c] и т.п. |
Callback
Параметр | По умолчанию | Описание параметра |
---|---|---|
onLoad | Функция обратного вызова, вызывается один раз при инициализации слайдера или после обновления через метод Update | |
onChange | Функция обратного вызова, вызывается каждый раз при смене состояния слайдера, возвращает объект, содержащий параметры слайдера | |
onFinish | Функция обратного вызова, вызывается один раз при смене состояния слайдера, когда работа слайдера завершена. Возвращает объект, содержащий параметры слайдера |
Описание данных передаваемых в функцию обратного вызова:
В любую функцию обратного вызова передается объект с данными слайдера:
1 2 3 4 5 6 7 8 9 10 11 12 | Obj: { "input": object, // jQuery-ссылка на input "slider": object, // jQuery-ссылка на контейнер слайдера "min": 10, // значение MIN "max": 20, // значение MAX "fromNumber": 10, // значение ОТ "toNumber": 20, // значение ДО "fromPers": 25, // значение ОТ в процентах "toPers": 75, // значение ДО в процентах "fromX": 100, // координата x ползунка-ОТ в пикселях "toX": 200 // координата x ползунка-ДО в пикселях } |
Создание слайдера (подробно)
Пример слайдера, запущенного с параметрами:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | $("#someID").ionRangeSlider({ min: 10, // минимальное значение max: 100, // максимальное значение from: 30, // предустановленное значение ОТ to: 80, // предустановленное значение ДО type: "single", // тип слайдера step: 10, // шаг слайдера prefix: "$", // префикс значение postfix: " €", // постфикс значение maxPostfix: "+", // постфикс для максимального значения hasGrid: true, // показать сетку gridMargin: 7, // отсуп от края сетки до края слайдера hideMinMax: true, // спрятать поля Min и Max hideFromTo: true, // спрятать поля From и To prettify: true, // разделять цифры пробелами 10 000 disable: false, // заблокировать слайдер values: ["a", "b", "c"], // массив предустановленных значений onLoad: function (obj) { // callback, вызывается при запуске и обновлении console.log(obj); }, onChange: function (obj) { // callback, вызывается при каждом изменении состояния console.log(obj); }, onFinish: function (obj) { // callback, вызывается один раз в конце использования console.log(obj); } }); |
Слайдер с параметрами можно также инициализировать используя атрибуты data-* у тэга input:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div data-from="30" // предустановленное значение ОТ data-to="70" // предустановленное значение ДО data-type="double" // тип слайдера data-step="10" // шаг слайдера data-prefix="$" // префикс значение data-postfix=" €" // постфикс значение data-maxpostfix="+" // постфикс значение для максимального числа data-hasgrid="true" // показать сетку data-gridmargin="7" // устанавливаем отступ сетки от края data-hideminmax="true" // спрятать поля Min и Max data-hidefromto="true" // спрятать поля From и To data-prettify="false" // не разделять цифры пробелами 10000 вместо 10 000 data-disable="true" // отключить слайдер data-values="a,b,c" // предустановленные значения, элементы через запятую > |
Публичные методы
Обновление слайдера, метод update:
1 2 3 4 5 6 7 | $("#someID").ionRangeSlider("update", { min: 20, // меняем минимальное значение max: 90, // меняем максимальное значение from: 40, // меняем предустановленное значение ОТ to: 70, // меняем предустановленное значение ДО step: 5 // меняем шаг слайдера }); |
Удаление слайдера, метод remove:
1 | $("#someID").ionRangeSlider("remove"); |