Demos: смотреть
JQuery плагин слайдер.
Установка проекта:
git clone git@github.com:vovnet/slider.git
npm install
Запуск локального сервера:
npm run serv
Сборка проекта:
npm run build
Деплой на github pages:
npm run deploy
Создаем слайдер:
$('#slider').slider();
Конструктор слайдера принимает следующие параметры:
- минимальное и максимальное значения
- размер шага
- текущее значение (либо массив значений в случае установки
range: true
) - одиночный или интервал
- горизонтальный или вертикальный вид
- отображать значения над бегунками
- обработчик события изменения значений слайдера
const slider = $('#slider').slider({
min: 0,
max: 100,
range: false,
value: 50,
step: 1,
orientation: 'horizontal',
showLabels: true
});
Можно подписаться на 'change' событие слайдера:
const slider = $('#slider').slider('add', 'change', () => {
console.log(slider.value);
});
Так же, при создании слайдера можно передать в объекте настроек:
$('#slider').slider({
min: 0,
max: 100,
onChange: () => { console.log('data is changed') },
});
Тесты запускаются командой npm test
Покрытие npm run coverage