개요

증가/감소 버튼과 숫자 입력으로 값을 제어하는 컴포넌트입니다.

HTML 구조

<div class="dewp-stepper" id="stp">
  <button class="dewp-stepper-decrement" type="button">-</button>
  <input class="dewp-stepper-input" type="number" value="2" />
  <button class="dewp-stepper-increment" type="button">+</button>
</div>
        

JavaScript 초기화

const el = document.getElementById('stp');
DEWP.initStepper(el, { min: 0, max: 10, step: 1, value: 2 });
        

접근성

• 키보드: 입력 포커스 상태에서 ArrowUp/ArrowDown으로 증감
• 버튼은 기본 버튼 역할과 라벨을 제공

상태 관리

• min/max/step/value 옵션으로 범위 제어
• 경계값 도달 시 증/감 버튼 비활성화