Возможно вас это заинтересует
На дня понадобилось сделать небольшой слайдер с диапазоном цен и для решения этой задачи сначала хотел использовать известный всем UI Slider. Но он мне казался очень замороченным и немного устаревшим несмотря на то, что у него огромное количество разнообразных настроек при комбинировании которых можно сделать практически все что угодно. Но 2/3 всего функционала для моей цели вообще не нужны. Пришлось обратиться с соответствующим запросом к поисковикам. Поиски себя оправдали, о том что мне удалось найти читайте в полной статье)).

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 – для двойного слайдера
min10Не обязательный параметр, автоматически устанавливается из атрибута value базового поля input. Например если value=”10;100″, то примет значение 10
max100Не обязательный параметр, автоматически устанавливается из атрибута value базового поля input. Например если value=”10;100″, то примет значение 10
fromminНе обязательный параметр, по умолчанию равен значению min. Позволяет задать стартовую позицию слайдера “ОТ”
tomaxНе обязательный параметр, по умолчанию равен значению max. Позволяет задать стартовую позицию слайдера “ДО”
step1Не обязательный параметр, задает шаг слайдера
prefixНе обязательный параметр, добавляет текст до всех значений. Например prefix – “$” модифицирует значение “100” в “$100”
postfixНе обязательный параметр, добавляет текст после всех значений. Например postfix – ” €” модифицирует значение “100” в “100 €”
maxPostfixНе обязательный параметр, добавляет для максимального значения. Например maxPostfix – “+” модифицирует значение “100” в “100+”
hasGridfalseНе обязательный параметр, включает сетку ниже слайдера (высота увеличивается на 20px и это можно настроить через CSS)
gridMargin0Не обязательный параметр, устанавливает отсуп от края сетки до края слайдера
hideMinMaxfalseНе обязательный параметр, отключает поля Min и Max
hideFromTofalseНе обязательный параметр, отключает поля From и To
prettifytrueНе обязательный параметр, позволяет разделять длинные цифры пробелами, например 10 000 вместо 10000
disablefalseВизуально отключает слайдер
valuesnullМассив предустановленных значений: [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");

Возможно вас это заинтересует
comments powered by HyperComments