Ползунок диапазона — Range Slider Fox
Range Slider Fox — это простой и удобный слайдер диапазона, написанный на TypeScript в виде плагина jQuery.
Version: 1.0
NPM:
npm i range-slider-fox
import 'range-slider-fox';
Вы можете настроить ползунок диапазона так, как вам нужно в демонстрационной панели и скопировать код конфигурации из столбца «Код конфигурации», нажав кнопку «Копировать код». Только не забудьте изменить значение внутри скобки $(…).
Описание:
- Адаптивный и доступный дизайн
- Возможность управления с клавиатуры и тача
- Поддержка скинов (вы можете полностью изменить внешний вид слайдера с помощью css)
- Имеет 4 встроенные темы
- Высокая производительность благодаря продуманной архитектуре
- Кроссбраузерность
- Поддерживается вертикальный вид
Ключевая особенность:
- Любое количество ползунков на одной странице без конфликтов и значительных проблем с производительностью
- Поддерживаются отрицательные и дробные значения
- Возможность установить пользовательский шаг или включить переходы по значениям шкалы
- Возможность отключения элементов пользовательского интерфейса
- Постфиксы и префиксы для ваших значений
- Слайдер устанавливает свое значение в свойстве value, если ползунок инициализируется на элементе ввода.
- Поддерживается конфигурация и манипулирование через атрибуты данных
- Вы можете заблокировать работу слайдера
- Вы можете подписаться и отписаться от событий слайдера, используя его API (onStart, onChange, onReset, onUpdate)
- Ползунок поддерживает внешние методы (обновить, сбросить, уничтожить)
- Вид шкалы адаптируется при изменении ширины ползунка, что делает его полностью адаптивным
- Вы можете изменить вид слайдера в любое время: вертикально или горизонтально
- Код плагина совместим с ES5
Зависимости:
Но можно использовать без jQuery.
Для этого необходимо использовать класс:
new Controller( new Model(options) , new View(element) )
- jQuery
- rangeSliderFox.js
Добавьте на страницу следующие таблицы стилей:
- rangeSliderFox.css
Инициализация:
<input class="rslider__fox" value="">
$('.rslider__fox').RangeSliderFox({
type: 'double',
theme: 'fox',
min: -120,
max: 800,
to: 500,
from: 200,
bar: true,
tipMinMax: true,
tipFromTo: true,
grid: true,
gridSnap: false,
gridNumber: 40,
onStart: (data) => {
console.log(data.type);
console.log(data.orientation);
console.log(data.theme);
console.log(data.min);
console.log(data.max);
console.log(data.from);
console.log(data.to);
console.log(data.step);
console.log(data.keyStepOne);
console.log(data.keyStepHold);
console.log(data.bar);
console.log(data.tipPrefix);
console.log(data.tipPostfix);
console.log(data.tipMinMax);
console.log(data.tipFromTo);
console.log(data.grid);
console.log(data.gridSnap);
console.log(data.gridNumber);
console.log(data.gridStep);
console.log(data.gridRound);
console.log(data.disabled);
},
onChange:(data) => {
console.log(data);
},
onUpdate:(data) => {
console.log(data);
},
onReset:(data) => {
console.log(data);
}
})
Использование API:
const object = $(dom).RangeSliderFox({}).data('RangeSliderFox');
// This piece of code will change range values and set the dot on position 350.
object.update({
min:0,
max:600,
from:350
})
// unsubscribe from events
object.update({
onStart:null,
onChange:null,
onUpdate:null,
onReset:null
})
object.reset()
// reset - will reset all the setup to the values which were
// passed on initialization or will take default values
object.destroy()
// destroy - will destroy slider instance, DOM-elements and all related events.
Настройки:
Опции | Атрибуты данных | Значения по умолчанию (возможные значения) | Тип | Описание |
type | data-type | 'single' ('double') | string | Тип точки (одинарная или двойная) |
orientation | data-orientation | 'horizontal' ('vertical') | string | ориентация слайдера (вертикальная или горизонтальная) |
theme | data-theme | 'base' ('fox' , 'dark', 'classic') | string | Передайте название темы. CSS-селектор должен иметь имя типа .rs-[имя] (например, .rs-base) |
min | data-min | 0 (-n, n.n..) | number | Минимальное значение диапазона |
max | data-max | 10 (-n, n.n..) | number | Максимальное значение диапазона |
to | data-to | 2 (-n, n.n..) | number | Положение второй точки |
from | data-from | 1 (-n, n.n..) | number | Положение первой точки |
step | data-step | 0 (n, n.n.. <= max-min) | number | Шаг перемещения точки |
keyStepOne | data-key-step-one | 0 (max-min) | number | Шаг перемещения точки по клавише клавиатуры однократным нажатием |
keyStepHold | data-key-step-hold | 0 (max-min) | number | Шаг перемещения точки при удержании клавиши на клавиатуре |
bar | data-bar | false | boolean | Вид индикатора диапазона (показан или скрыт) |
tipPrefix | data-tip-prefix | '' (char…) | string | Префикс для подсказок (максимум 15 символов) |
tipPostfix | data-tip-postfix | '' (char…) | string | Постфикс для подсказок (максимум 15 символов) |
tipMinMax | data-tip-min-max | true | boolean | Просмотр подсказок MinMax (вкл. или выкл.) |
tipFromTo | data-tip-from-to | true | boolean | Просмотр подсказок FromTo (вкл. или выкл.) |
grid | data-grid | false | boolean | Просмотр шкалы (вкл. или выкл.) |
gridSnap | data-grid-snap | false | boolean | Точка может останавливаться между метками шкалы (да или нет) |
gridNumber | data-grid-num | 0 (n, n.n..) | number | Количество интервалов, на которые разбита шкала |
gridStep | data-grid-step | 0 (n, n.n..) | number | Количество шагов в интервале |
gridRound | data-grid-round | 0 (n) | number | Дробное округление |
disabled | data-disabled | false | boolean | Ползунок включен или отключен |
onStart | — | null | Function | Вызвать callback-функцию после первого запуска плагина и передать в качестве аргумента объект текущих данных конфигурации |
onChange | — | null | Function | Вызывать callback-функцию после каждого взаимодействия пользователя с ползунком и передавать в качестве аргумента объект текущих данных конфигурации |
onUpdate | — | null | Function | Вызвать callback-функцию после вызова метода update и передать в качестве аргумента объект текущих данных конфигурации |
onReset | — | null | Function | Вызвать callback-функцию после вызова метода «сброс» и передать в качестве аргумента объект текущих данных конфигурации |
Детали:
- только одно из значений gridNumber или gridStep может быть установлено для шага шкалы. Если они оба установлены, gridStep будет игнорироваться
- gridSnap игнорируется, если установлен один из параметров step, keyStepOne, keyStepHold
- step игнорируется при управлении с клавиатуры, если установлен один из параметров keyStepOne, keyStepHold
Настройка и команды (сборка проекта, запуск, тестирование, продакшен)
- Node version v14.18.1
Установите зависимости:
npm i
Запустить сервер разработки:
npm start
go to http://localhost:8080/
На рабочем сервере создайте файлы пакетов:
npm run build
Сборка только плагина:
npm run plugin
Тестирование плагина:
npm run test
Демо плагина: