Simple js slider plugin

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

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

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

Содержание

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

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

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

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

Зависимости

3. 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);