# simple-js-slider

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

Latest version **1.1.4** (published 2021-10-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install simple-js-slider
pnpm add simple-js-slider
yarn add simple-js-slider
bun add simple-js-slider
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.4 |
| Published | 2021-10-12 |
| First published | 2021-05-09 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 332.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Vitalij Bakalov |
| Maintainers | metalhead89 |

## Links

- npm: https://www.npmjs.com/package/simple-js-slider
- Repository: https://github.com/MetalHead89/fsd_part4
- Homepage: https://github.com/MetalHead89/fsd_part4#readme
- Issues: https://github.com/MetalHead89/fsd_part4/issues
- npm.io page: https://npm.io/package/simple-js-slider

## Recent versions

- 1.1.4 (latest) — 2021-10-12
- 1.1.3 — 2021-10-08
- 1.1.2 — 2021-10-07
- 1.1.1 — 2021-10-05
- 1.0.1 — 2021-05-09

## README

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

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

## Содержание

1. [Демо страница](#демо-страница)
2. [Зависимости](#зависимости)
3. [Использование](#использование)
  * [Установка](#установка)
  * [Импорт плагина в проект](#импорт-плагина-в-проект)
	* [Добавление слайдера в DOM](#добавление-слайдера-в-dom)
	* [Настройки по-умолчанию](#настройки-по-умолчанию)
	* [Пользовательские настройки](#пользовательские-настройки)
	* [API](#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);

---
_Source: https://npm.io/package/simple-js-slider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._