Это ещё один обыкновенный слайдер.
Опробовать слайдер в действии можно открыв превью.
Внимание: Данный пакет является учебным проектом для студентов компании Metalamp, не стоит его использовать в реальных проектах.
Note: This package is a training project for students of the company Metalamp, do not use it in real projects.
Для работы слайдера необходима библиотека jQuery версии ^3.1.0.
Библиотека jQuery должна быть загружена на страницу раньше слайдера.
Инструкции данного раздела следует выполнять в командной строке.
С помощью npm
npm install o-sliderС помощью yarn
yarn add o-sliderimport 'o-slider';require('o-slider');Настройки по умолчанию
$(() => {
$(selector).oSlider();
})Код инициализации слайдера должен запускаться после того как страница будет загружена. В примере выше это обеспечивает jQuery обёртка, далее в примерах она будет отброшена для лучшей читаемости кода.
Передача настроек с помощью объекта настроек
$(selector).oSlider({
from: 50,
});Тоже самое что и выше только с помощью data-* атрибутов
<div class = "o-slider" data-from = "50"></div>
<script>
$('.o-slider').oSlider();
</script>Передача настроек через data-* атрибуты возможна и после инициализации слайдера.
Настройки указанные в data-* атрибутах имеют приоритет над переданными в объект настроек.
| Параметр | Тип | По умолчанию | Описание |
|---|---|---|---|
| min | number | 0 | минимальное значение |
| max | number | 100 | максимальное значение |
| step | number | 1 | размера шага |
| from | number | 0 | позиция ползунка, если range: true то нижняя граница интервала |
| to | number | null | верхняя граница интервала, этот параметр не имеет смысла если range: false |
| tip | boolean | false | добавить подсказку |
| bar | boolean | false | добавить бар |
| scale | boolean | false | добавить шкалу |
| range | boolean | false | создать интервал |
| vertical | boolean | false | сменить направление слайдера на вертикальное |
Вызов без options возвращает объект настроек слайдера.
const sliderSettings = $(selector).oSlider('settings'); Аргумент options позволяет изменять настройки слайдера.
const $slider = $(selector).oSlider();
$slider.oSlider('settings', {
min: 10,
from: 20,
});
console.log($slider.oSlider('settings')); // { min: 10, from: 20, ...rest }Запускает callback функцию при каждом изменении настроек слайдера, передает объект только с измененными паматрами в аргументы callback функции.
const $slider = $(selector).oSlider();
// подписываемся
$slider.oSlider('subscribe', (changedSettings) => {
console.log(changedSettings);
});
// устанавливаем новое значение параметру from
$slider.oSlider('settings', {
from: 10,
});
// console.log выдаст { from: 10 }Прекращает запуск callback функции при изменениях настроек.
const $slider = $(selector).oSlider();
const cb = ((changedSettings) => {
console.log(changedSettings);
});
// подписываемся
$slider.oSlider('subscribe', cb);
// отписываемся
$slider.oSlider('unsubscribe', cb);
// устанавливаем новое значение параметру from
$slider.oSlider('settings', {
from: 10,
});
// console.log не выполнится, так как функция cb удалена из подписчиковЕсли вы желаете развивать проект, ознакомьтесь с руководством для разрабочиков здесь.
Этот проект лицензирован на условиях лицензии MIT.
Вы можете ознакомиться с содержанием лицензии здесь.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent