Ion.Range Slider 2.0.0

English description | Описание на русском

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

Страница проекта и демо
Download ion.rangeSlider-2.0.0.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 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

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

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

Площадка для эксперементов с плагином

Настройка

    <tr>
        <td>min<div>data-min</div></td>
        <td>10</td>
        <td>number</td>
        <td>Обозначает минимальное возможное значение слайдера.</td>
    </tr>
    <tr>
        <td>max<div>data-max</div></td>
        <td>100</td>
        <td>number</td>
        <td>Обозначает максимальное возможное значение слайдера.</td>
    </tr>
    <tr>
        <td>from<div>data-from</div></td>
        <td>min</td>
        <td>number</td>
        <td>Позволяет задать стартовую позицию левого ползунка (или единственного ползунка)</td>
    </tr>
    <tr>
        <td>to<div>data-to</div></td>
        <td>max</td>
        <td>number</td>
        <td>Позволяет задать стартовую позицию правого ползунка</td>
    </tr>
    <tr class="options__step">
        <td>step<div>data-step</div></td>
        <td>1</td>
        <td>number</td>
        <td>Задает шаг движения ползунков. Всегда больше нуля. Может быть дробным.</td>
    </tr>

    <tr class="options__step">
        <td>values<div>data-values</div></td>
        <td>[]</td>
        <td>array</td>
        <td>Переопределяет значения слайдера, значениями взятыми из массива values. Параметры min, max, step переопределяются автоматически.</td>
    </tr>

    <tr class="options__new">
        <td>from_fixed<div>data-from-fixed</div></td>
        <td>false</td>
        <td>boolean</td>
        <td>Фиксирует позицию левого ползунка (или единственного ползунка).</td>
    </tr>
    <tr class="options__new">
        <td>from_min<div>data-from-min</div></td>
        <td>min</td>
        <td>number</td>
        <td>Ограничивает минимальную позицию левого ползунка.</td>
    </tr>
    <tr class="options__new">
        <td>from_max<div>data-from-max</div></td>
        <td>max</td>
        <td>number</td>
        <td>Ограничивает максимальную позицию левого ползунка.</td>
    </tr>
    <tr class="options__new">
        <td>from_shadow<div>data-from-shadow</div></td>
        <td>false</td>
        <td>boolean</td>
        <td>Подсвечивает ограничения наложенные на левый ползунок.</td>
    </tr>

    <tr class="options__new">
        <td>to_fixed<div>data-to-fixed</div></td>
        <td>false</td>
        <td>boolean</td>
        <td>Фиксирует позицию правого ползунка.</td>
    </tr>
    <tr class="options__new">
        <td>to_min<div>data-to-min</div></td>
        <td>min</td>
        <td>number</td>
        <td>Ограничивает минимальную позицию правого ползунка.</td>
    </tr>
    <tr class="options__new">
        <td>to_max<div>data-to-max</div></td>
        <td>max</td>
        <td>number</td>
        <td>Ограничивает максимальную позицию правого ползунка.</td>
    </tr>
    <tr class="options__new options__step">
        <td>to_shadow<div>data-to-shadow</div></td>
        <td>false</td>
        <td>boolean</td>
        <td>Подсвечивает ограничения наложенные на правый ползунок.</td>
    </tr>

    <tr>
        <td>prettify_enabled<div>data-prettify-enabled</div></td>
        <td>true</td>
        <td>boolean</td>
        <td>Улучшает внешний вид длинных цифр. 10000000 &rarr; 10 000 000</td>
    </tr>
    <tr class="options__new">
        <td>prettify_separator<div>data-prettify-separator</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>—</div></td>
        <td>null</td>
        <td>function</td>
        <td>Собственная функция для постобработки значений слайдера. Позволяет делать с цифрами всё что угодно, например приобразовывать в даты и время.</td>
    </tr>

    <tr class="options__new options__step">
        <td>force_edges<div>data-force-edges</div></td>
        <td>false</td>
        <td>boolean</td>
        <td>Заставляет слайдер всегда оставаться внутри границ своего контейнера.</td>
    </tr>

    <tr class="options__new">
        <td>keyboard<div>data-keyboard</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>data-keyboard-step</div></td>
        <td>5</td>
        <td>number</td>
        <td>Шаг движения ползунка при управлении с клавиатуры. Задается в процентах.</td>
    </tr>

    <tr>
        <td>grid<div>data-grid</div></td>
        <td>false</td>
        <td>boolean</td>
        <td>Включает отображение сетки значений.</td>
    </tr>
    <tr>
        <td>grid_margin<div>data-grid-margin</div></td>
        <td>true</td>
        <td>boolean</td>
        <td>Выравнивает сетку по крайним позициям ползунков, либо по границам контейнера.</td>
    </tr>
    <tr class="options__new">
        <td>grid_num<div>data-grid-num</div></td>
        <td>4</td>
        <td>number</td>
        <td>Количество ячеек в сетке.</td>
    </tr>
    <tr class="options__new options__step">
        <td>grid_snap<div>data-grid-snap</div></td>
        <td>false</td>
        <td>boolean</td>
        <td>Привязка сетки к шагу слайдера (параметр step). Если активирован, то параметр grid_num не учитывается.</td>
    </tr>

    <tr>
        <td>hide_min_max<div>data-hide-min-max</div></td>
        <td>false</td>
        <td>boolean</td>
        <td>Прячет лейблы "min" и "max"</td>
    </tr>
    <tr class="options__step">
        <td>hide_from_to<div>data-hide-from-to</div></td>
        <td>false</td>
        <td>boolean</td>
        <td>Прячет лейблы "from" и "to"</td>
    </tr>

    <tr>
        <td>prefix<div>data-prefix</div></td>
        <td>—</td>
        <td>string</td>
        <td>Отобразить префикс для значений слайдера. Будет отображен перед цифрой, например $100.</td>
    </tr>
    <tr>
        <td>postfix<div>data-postfix</div></td>
        <td>—</td>
        <td>string</td>
        <td>Отобразить постфикс для значений слайдера. Будет отображен после цифры, например 100 руб.</td>
    </tr>
    <tr>
        <td>max_postfix<div>data-max-postfix</div></td>
        <td>—</td>
        <td>string</td>
        <td>Отобразить дополнительный постфикс для максимального значения слайдера. Будет отображен если один из ползунков достигнет крайнего правого значения. Например 0 — 100+</td>
    </tr>
    <tr class="options__new">
        <td>decorate_both<div>data-decorate-both</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>data-values-separator</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>disable<div>data-disable</div></td>
        <td>false</td>
        <td>boolean</td>
        <td>Блокирует слайдер, делает его не активным.</td>
    </tr>

    <tr>
        <td>onStart<div>—</div></td>
        <td>null</td>
        <td>function</td>
        <td>Коллбэк. Вызывается при старте слайдера.</td>
    </tr>
    <tr>
        <td>onChange<div>—</div></td>
        <td>null</td>
        <td>function</td>
        <td>Коллбэк. Вызывается каждый раз когда обновляются значения слайдера.</td>
    </tr>
    <tr>
        <td>onFinish<div>—</div></td>
        <td>null</td>
        <td>function</td>
        <td>Коллбэк. Вызывается когда пользователь заканчивает перемещать ползунок.</td>
    </tr>
    <tr class="options__new">
        <td>onUpdate<div>—</div></td>
        <td>null</td>
        <td>function</td>
        <td>Коллбэк. Вызывается когда слайдер обновляется методом <code>update</code> или <code>reset</code>.</td>
    </tr>
</tbody>

Атрибут	По умолчанию	Тип	Описание
type data-type	"single"	string	Позволяет выбрать тип слайдера, может принимать значение `single` - для одиночного слайдера или `double` - для двойного слайдера

Описание данных передаваемых в колбэки (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();

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

Базовые настройки
Расширенные настройки
Взаимодействия

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

История обновлений

2.0.0: 08.11.2014 - Новый API. Внесено множество улучшений и исправлено множество багов.
1.9.3: 06.08.2014 - Добавлена поддержка bower
1.9.2: 04.08.2014 - Новый параметр gridMargin. Выполнены задачи: #89, #94, #96, #97, #98, #103
1.9.1: 15.04.2014 - Исправлено несколько багов. Задачи: #81, #82, #85
16.03.2014 - Обновление описания плагина. Новый дизайн демок. Несколько новых параметров. Задачи: #65, #68, #70, #77, #78
12.01.2014 - Исправлены баги, добавлены новые функции. Задачи: #12, #30, #33, #43, #47, #52, #58
31.10.2013 - Исправлены баги: #13, #31, #35, #37, #40, несколько мелких оптимизаций кода
10.10.2013 - Новый скин Flat UI. Общие оптимизации скинов. Исправлен баг #25.
08.10.2013 - Исправлены задачи #20, #21, #23, #24, #26. Удален параметр hideText. Новый метод и настройки. Несколько мелких оптимизаций и улучшено оформление кода.
11.09.2013 - Исправлен баг в браузерах на Android-устройствах. Добавлена поддержка отрицательных и дробных чисел. Issues #15, #16
23.08.2013 - Исправлено несколько багов и добавлены новые возможности. Так же исправлены Issues #7, #8, #9, #10
30.06.2013 - исправление мелких багов, новый параметр hideText
21.06.2013 - добавлена возможность показывать сетку
21.06.2013 - исправление мелких багов
06.06.2013 - добавлены публичные методы и произведена оптимизация кода
06.06.2013 - мелкие обновления CSS файлов
30.04.2013 - добавлен новый метод onFinish
15.02.2013 - добавлена возможность настраивать слайдер через атрибуты data-*

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

readme.ru.md

readme.ru.md

Ion.Range Slider 2.0.0

Описание

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

Демо

Зависимости

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

Устанавливаем с помощью bower

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

Демо для новичков

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

Площадка для эксперементов с плагином

Настройка

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

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

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

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

История обновлений

Files

readme.ru.md

Latest commit

History

readme.ru.md

File metadata and controls

Ion.Range Slider 2.0.0

Описание

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

Демо

Зависимости

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

Устанавливаем с помощью bower

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

Демо для новичков

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

Площадка для эксперементов с плагином

Настройка

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

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

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

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

История обновлений