14 934 Скрипты / Form

Stepper.js — увеличение/уменьшение значений в input type="number" заданным шагом

Скрипт позволяющий кастомизировать кнопки плюс/минус у поля input type="number" в соответствии с дизайном. Настройки интервала значений и шага задаются через привычные атрибуты поля: step, max, min. Поля такого рода часто используются при указании количества товара помещаемого в корзину, а также управление товаром в самой корзине.

HTML

Оборачиваем input type="number" и кнопки в контейнер .stepper
<div class="stepper stepper--style-1 js-spinner">
    <input autofocus type="number" min="0" max="100" step="1" value="0" class="stepper__input">
    <div class="stepper__controls">
        <button type="button" spinner-button="up">+</button>
        <button type="button" spinner-button="down"></button>
    </div>
</div>
Через атрибут step задается шаг, через атрибуты min и max определяют максимальное и минимальное значение.
Есть три вида стилизации stepper. Стиль переключается изменением одного класса.
  • .stepper--style-1 - кнопки управления расположены правее поля ввода и друг под другом
  • .stepper--style-2 - кнопки управления расположены слева и справа от поля ввода
  • .stepper--style-3 -кнопки управления расположены слева и справа от поля ввода, без обводки

CSS

JS

Для работы требуется подключить jQuery.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
Сам плагин stepper.js внизу документа.
<script src="js/stepper.min.js"></script>
Для внешнего контейнера .stepper указывается класс .js-spinner, чтобы инициализировать плагин.
Атрибуты spinner-button="up"spinner-button="down" указывают скрипту что делают данные кнопки. Уменьшают или увеличивают значение.
Через атрибут data-stepper-debounce="400" можно задать время задержки в мс (событие выполнится с некоторой задержкой)
Скачать 925Загрузок 4,53 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи