simple-js-slider v1.1.4

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'});

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

API

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

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

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

Функции API

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

$(sliderWrapper).simpleJsSlider(getThumbsValues);