Команда для запуска демо в проекте: 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)
Выглядеть это будет примерно так:
Перечень параметров через которые задаётся конфигурация плагина:
| Имя | Описание | Значение по-умолчанию |
|---|---|---|
| type | Тип: string; Варианты: "range", "point" | "range" |
| rangeStart | Тип: number; (Точка отсчёта) | 0 |
| rangeOffset | Тип: number; (Количество значений) | 100 |
| step | Тип: number ; (Размер шага) | 1 |
| orient | Тип: string; Варианты: "vertical", "horizontal" | "horizontal" |
| scale | Тип: boolean (Отображение шкалы) | true |
| cloud | Тип: string; Варианты: "always", "none", "click" | "click" |
| scaleInterval | Тип: number; (Интервал отображаемых делений шкалы) | 10 |
| list | Тип: Array <number/string> (Альтернативный способ) | [] |
| start | Тип: number; (Начальное положение первого ползунка) | = origin |
| end | Тип: number; (Начальное положение второго ползунка) | = rangeOffset |
Если длинна массива list более нуля, то свойства step, origin, scaleInterval задаются по-умолчанию, а rangeOffset - исходя из длинны .
Перечень методов слайдера:
| Имя | Описание | Принимаемые аргументы |
|---|---|---|
| getValues | Возвращает объект со значениями слайдера | |
| setValues | Устанавливает пользовательские значения слайдера | Один либо два номера, в зависимости от параметра слайдеоа type |
| getConfig | Возвращает объект с параметрами слайдера | |
| changeConfig | Изменяет параметры слайдера | Объект, аналогичный тому, что передаётся при создании слайдера |
| addValuesUpdateListener | Добавляет коллбэк для обновления значений слайдера | Функция, принимающая в качестве аргумента объект с новыми значения и координатами |
| removeValuesUpdateListener | Удаляет ранее установленный коллбэк для обновления значений слайдера | Функция, раннее переданная в addValuesUpdateListener |
| addConfigChangeListener | Добавляет коллбэк для обновления параметров слайдера | Функция, принимающая в качестве аргумента объекты со старыми и новыми параметрами слайдера |
| removeConfigChangeListener | Удаляет ранее установленный коллбэк для обновления параметров слайдера | Функция, раннее переданная в removeConfigChangeListener |