Ползунок диапазона — Range Slider Fox

Range Slider Fox — это простой и удобный слайдер диапазона, написанный на TypeScript в виде плагина jQuery.

Version: 1.0

Репозиторий

Download ZIP

NPM:

npm i range-slider-fox

import 'range-slider-fox';

---

Вы можете настроить ползунок диапазона так, как вам нужно в демонстрационной панели и скопировать код конфигурации из столбца «Код конфигурации», нажав кнопку «Копировать код». Только не забудьте изменить значение внутри скобки $(…).

---

Описание:

• Адаптивный и доступный дизайн
• Возможность управления с клавиатуры и тача
• Поддержка скинов (вы можете полностью изменить внешний вид слайдера с помощью css)
• Имеет 4 встроенные темы
• Высокая производительность благодаря продуманной архитектуре
• Кроссбраузерность
• Поддерживается вертикальный вид

---

Ключевая особенность:

• Любое количество ползунков на одной странице без конфликтов и значительных проблем с производительностью
• Поддерживаются отрицательные и дробные значения
• Возможность установить пользовательский шаг или включить переходы по значениям шкалы
• Возможность отключения элементов пользовательского интерфейса
• Постфиксы и префиксы для ваших значений
• Слайдер устанавливает свое значение в свойстве value, если ползунок инициализируется на элементе ввода.
• Поддерживается конфигурация и манипулирование через атрибуты данных
• Вы можете заблокировать работу слайдера
• Вы можете подписаться и отписаться от событий слайдера, используя его API (onStart, onChange, onReset, onUpdate)
• Ползунок поддерживает внешние методы (обновить, сбросить, уничтожить)
• Вид шкалы адаптируется при изменении ширины ползунка, что делает его полностью адаптивным
• Вы можете изменить вид слайдера в любое время: вертикально или горизонтально
• Код плагина совместим с ES5

---

Зависимости:

jQuery 1.2.x+

Но можно использовать без jQuery.

Для этого необходимо использовать класс:

• 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

---

Демо плагина: