# range-slider-for-ml > Range slider created as part of the educational program Latest version **1.4.4** (published 2021-09-27) · ISC license · 0 weekly downloads ## Install ```sh npm install range-slider-for-ml pnpm add range-slider-for-ml yarn add range-slider-for-ml bun add range-slider-for-ml ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.4.4 | | Published | 2021-09-27 | | First published | 2021-02-06 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 7 | | Unpacked size | 38.4 KB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 0 | | Author | Euyevnc | | Maintainers | euyevnc | | Keywords | range slider, custom elements, web components, ui | ## Links - npm: https://www.npmjs.com/package/range-slider-for-ml - Repository: https://github.com/Euyevnc/RangeSlider - Homepage: https://euyevnc.github.io/RangeSlider - Issues: https://github.com/Euyevnc/RangeSlider/issues - npm.io page: https://npm.io/package/range-slider-for-ml ## Dependencies (7) - [jquery](https://npm.io/package/jquery.md) ^3.5.1 - [core-js](https://npm.io/package/core-js.md) ^3.6.5 - [gh-pages](https://npm.io/package/gh-pages.md) ^3.1.0 - [@babel/core](https://npm.io/package/@babel/core.md) ^7.11.6 - [babel-loader](https://npm.io/package/babel-loader.md) ^8.1.0 - [@types/jquery](https://npm.io/package/@types/jquery.md) ^3.5.5 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.11.2 ## Alternatives - [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads - [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads - [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads - [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads - [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads ## Recent versions - 1.4.4 (latest) — 2021-09-27 - 1.4.3 — 2021-09-24 - 1.4.1 — 2021-09-18 - 1.4.0 — 2021-07-11 - 1.0.38-a — 2021-06-18 - 1.0.37 — 2021-06-11 - 1.0.35 — 2021-05-17 - 1.0.32 — 2021-05-16 - 1.0.31 — 2021-04-07 - 1.0.3 — 2021-04-07 - 1.0.26 — 2021-03-27 - 1.0.25 — 2021-03-24 - 1.0.24 — 2021-02-22 - 1.0.23 — 2021-02-19 - 1.0.22 — 2021-02-19 - … 4 more at https://npm.io/package/range-slider-for-ml/versions ## README # RangeSlider [__DEMO__](https://euyevnc.github.io/RangeSlider/) Команда для запуска демо в проекте: ```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) ``` Выглядеть это будет примерно так: ![demo](https://github.com/Euyevnc/RangeSlider/blob/master/readme_assets/readme.png) Перечень параметров через которые задаётся конфигурация плагина: | Имя |Описание |Значение по-умолчанию| | ------------- |:------------------------------------------------:|:-----:| | 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 (Альтернативный способ) | []| | start | Тип: number; (Начальное положение первого ползунка) | = origin| | end | Тип: number; (Начальное положение второго ползунка) | = rangeOffset| **Если длинна массива _list_ более нуля, то свойства _step_, _origin_, _scaleInterval_ задаются по-умолчанию, а _rangeOffset_ - исходя из длинны .** Перечень методов слайдера: | Имя |Описание |Принимаемые аргументы| | ------------- |:------------------------------------------------:|:-----:| | getValues |Возвращает объект со значениями слайдера | | | setValues | Устанавливает пользовательские значения слайдера| Один либо два номера, в зависимости от параметра слайдеоа type| | getConfig | Возвращает объект с параметрами слайдера | | | changeConfig | Изменяет параметры слайдера| Объект, аналогичный тому, что передаётся при создании слайдера| |addValuesUpdateListener|Добавляет коллбэк для обновления значений слайдера | Функция, принимающая в качестве аргумента объект с новыми значения и координатами | | removeValuesUpdateListener | Удаляет ранее установленный коллбэк для обновления значений слайдера | Функция, раннее переданная в addValuesUpdateListener| | addConfigChangeListener| Добавляет коллбэк для обновления параметров слайдера| Функция, принимающая в качестве аргумента объекты со старыми и новыми параметрами слайдера| | removeConfigChangeListener| Удаляет ранее установленный коллбэк для обновления параметров слайдера |Функция, раннее переданная в removeConfigChangeListener| [__UML-диаграммa__](https://drive.google.com/file/d/1nYSpW9N7zwQJ2vJgMtDh5ux6BseQ3ryB/view?usp=sharing) --- _Source: https://npm.io/package/range-slider-for-ml · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._