simple-js-slider

Simple js slider plugin

Simple js slider plugin - простой в использовании слайдер для быстрого выбора значения или диапазона значений.

Особенности:

• два режима работы: "одиночный" - для выбора одного значения и "диапазон" - для выбора диапазона значений;
• горизонтальное и вертикальное представление;
• возможность задавать величину шага, а также минимальное и максимальное значение;
• возможность включения/отключения отображения шкалы и блоков со значениями над бегунками;
• удобное API, позволяющее получать данные и изменять настройки плагина во время работы из кода.

Содержание

1. Демо страница
2. Зависимости
3. Использование

• Установка
• Импорт плагина в проект
  • Добавление слайдера в DOM
  • Настройки по-умолчанию
  • Пользовательские настройки
  • API

Демо страница

https://metalhead89.github.io/fsd_demo_slider_page/

Зависимости

1. jQuery v3.5.1 - https://jquery.com/

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

Установка

Для установки плагина необходимо выполнить команду

npm i simple-js-slider

Импорт плагина в проект

Для импорта плагина необходимо добавить в точке входа вашего пректа

import 'simple-js-slider'

Также для корректной работы слайдера, необходимо произвести импорт стилей

import 'simple-js-slider/style.css'

Добавление слайдера в DOM

Слайдер размещается в пустом div элементе, который служит для него обёрткой. Поэтому первым шагом к добавлению слайдера в DOM, будет создание div элемента в месте, где должен находиться слайдер. Это можно сделать, как через HTML разметку, так и динамически в js коде. Например: const sliderWrapper = document.createElement('div'); const body = document.querySelector('body'); body.append(sliderWrapper);

Вторым шагом будет вызов функции simpleJsSlider() у обёрнутого в jQuery элемента, созданного ранее:

$(sliderWrapper).simpleJsSlider();

Готово! Слайдер добавлен в DOM и готов к работе.

Настройки по-умолчанию

На предыдущем шаге был успешно создан слайдер с настройками по-умолчанию. Они имеют следующий вид:

• ориентация: горизонтальная;
• тип: диапазон;
• шкала: отображается;
• значения над бегунками: отображаются;
• минимальное значение: 0;
• максимальное значение: 10;
• величина шага: 1

Пользовательские настройки

Настройки по-умолчанию удобны для быстрого создания нового слайдера, но в подавляющем большинстве случаев, необходим слайдер с иным диапазоном значений или другим типом. Для этого в плагине предусмотрена возможность конфигурирования настроек при создании слайдера. Всё что требуется сделать - это передать в метод simpleJsSlider() объект с необходимыми настройками, специфичными для текущего проекта:

$(sliderWrapper).simpleJsSlider({'min': 60, 'max': 4000, 'orientation': 'vertical'});

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

Опция	Тип	Возможные значения	Значение по-умолчанию	Описание
orientation	string	horizontal или vertical	horizontal	Ориентация слайдера. horizontal - горизонтальная, vertical - вертикальная
type	string	single или range	range	Тип слайдера. single - одно значение, range - диапазон значений
scale	boolean	true или false	true	Режим отображения шкалы. true - шкала отображается, false - шкала скрыта
tooltips	boolean	true или false	true	Режим отображения значений над бегунками. true - значения отображаются, false - значения скрыты
min	number	любое целое значение	0	Минимальное значение слайдера
max	number	любое целое значение	10	Максимальное значение слайдера
step	number	любое целое значение большее нуля	1	Величина шага

API

Помимо конфигурирования во время создания, плагином предусмотрен API для динамической смены настроек слайдера, уже размещённого в DOM. Для обращения к API нужно передать в функцию simpleJsSlider() два аргумента:

$(sliderWrapper).simpleJsSlider(functionAPI, arg);

• functionAPI - функция API, которую необходимо выполнить;
• arg - аргумент, который будет передан в функцию functionAPI

Функции API

Функция API	Тип аргумента	Описание
getModelSubject	-	Возвращает субъект модели плагина, который оповещает своих подписчиков об изменениях
getThumbsValues	-	Возвращает объект со значениями бегунков
getMin	-	Возвращает минимальное значение слайдера
getMax	-	Возвращает максимальное значение слайдера
getStep	-	Возвращает значение шага слайдера
getScaleState	-	Возвращает истину, если шкала отображается, иначе ложь
getPopUpsState	-	Возвращает истину, если всплывающие сообщения отображаются, иначе ложь
getType	-	Возвращает тип слайдера (одиночный или диапазон)
getOrientation	-	Возвращает ориентацию слайдера (горизонтальная или вертикальная)
refreshSliderState	ISliderSettings	Обновляет настройки слайдера в соответствии с полученным объектом

Например, для того, чтобы получить текущие значения бегунков, необходимо выполнить следующую команду:

$(sliderWrapper).simpleJsSlider(getThumbsValues);