/slider

Primary LanguageTypeScript

Слайдер

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

Диаграмма