Multirange Plugin

Multirange.js - это крошечный плагин javascript для создания ползунков. Он полностью настраивается и не требует зависимостей. Вы можете использовать его в качестве ползунка с двумя "ирисками" для изменения числовых диапазонов. Демо

См. Документация для получения описания общей структуры приложения, а также UML-диаграммы.

Монтаж

Клонирование репозитория

git clone https://github.com/hoka-hoka/multirange.git

Установка пакетов NPM

npm install

Выполнение тестов в командной строке

npm run test

Сборка проекта

npm run build

Пример HTML

При использовании плагина с опцией multirange в значении атрибута value указывается начальное и конечное положение ползунков. Помимо специальных свойств плагин сохраняет поддержку атрибута step, для установки значения шага.

<input class="range user__class" type="range" value="40,60" min="0" max="100" data-rotate="true" data-scale="true" data-multirange="multirange" data-popup="true" step="6">

Опции

Атрибуты	Значения	Описание
data-multirange	multirange	Добавить вторую "ириску"
data-direction	left, right	Изменить направление
data-popup	false, true	Добавить popup
data-rotate	false, true	Развернуть по вертикале
data-scale	false, true	Добавить шкалу

API

Для корректрировки расчёта движения ползунка рекомендуется при вызове функции плагина указать параметр toffeeSize, которые определяет размер "ириски" в px.

window.addEventListener('load', () => {
  var range1 = $('.r1').multiRange({
     toffeeSize: '12' 
  })
}

Параметры можно передать объектом в саму функцию плагина при его инициализации.

window.addEventListener('load', () => {
  var range1 = $('.r1').multiRange({ 
    toffeeSize: '16' 
    multirange: 'multirange',
    popup: true
 });

Дорожная карта

См. открытые проблемы для получения списка предлагаемых функций (и известных проблем).

Лицензия

Распространяется по лицензии MIT. См. LICENSE.

Связаться с нами

Ссылка на проект: https://github.com/hoka-hoka/multirange

Почта: sff1.tpu.ru

hoka-hoka/js.multiRange