range-slider-for-ml v1.4.4

RangeSlider

DEMO

Команда для запуска демо в проекте: npm run dev

Установка

npm i range-slider-for-ml

Как этим пользоваться

import "jquery"  
import "range-slider-for-ml"  
import"range-slider-for-ml/dist/styles.css"    
//Стили тоже нужно импортировать, и уже потом, если нужно, переопределять т.к. там заданы параметры позиционирования и размеры элементов  

Добавленный плагином метод носит имя rangeSlider. При применении он отрендерит слайдер/слайдеры с заданными свойствами и вернёт объект слайдера или массив объектов в случае, если jquery-объект содержит более одного элемента. Функция принимает один аргумент - объект. Через его параметры определяются параметры создаваемого слайдера. Котрые будут приведены в таблице ниже.

let params = {type: "range", orient:"horizontal", scale: true, scaleInterval: 1000, cloud: "click", origin: 0, rangeOffset: 15000, step: 100}

let container = $(".js-parent-container")
let slider = container.rangeSlider(params)

Для изменения параметров уже созданного слайдера можно использовать метод changeConfig, передав в качестве аргумента объект с параметрами, которые нужно изменить и их значениями:

let newParams = {scaleInterval: 2500, origin: 2000, rangeOffset: 10000}

slider.changeConfig(newParams)

Выглядеть это будет примерно так:

Перечень параметров через которые задаётся конфигурация плагина:

Если длинна массива list более нуля, то свойства step, origin, scaleInterval задаются по-умолчанию, а rangeOffset - исходя из длинны .

Перечень методов слайдера: | Имя |Описание |Принимаемые аргументы| | ------------- |:------------------------------------------------:|:-----:| | getValues |Возвращает объект со значениями слайдера | | | setValues | Устанавливает пользовательские значения слайдера| Один либо два номера, в зависимости от параметра слайдеоа type| | getConfig | Возвращает объект с параметрами слайдера | | | changeConfig | Изменяет параметры слайдера| Объект, аналогичный тому, что передаётся при создании слайдера| |addValuesUpdateListener|Добавляет коллбэк для обновления значений слайдера | Функция, принимающая в качестве аргумента объект с новыми значения и координатами | | removeValuesUpdateListener | Удаляет ранее установленный коллбэк для обновления значений слайдера | Функция, раннее переданная в addValuesUpdateListener| | addConfigChangeListener| Добавляет коллбэк для обновления параметров слайдера| Функция, принимающая в качестве аргумента объекты со старыми и новыми параметрами слайдера| | removeConfigChangeListener| Удаляет ранее установленный коллбэк для обновления параметров слайдера |Функция, раннее переданная в removeConfigChangeListener|

UML-диаграммa