수량 스핀 버튼

spin-button은 좌우 증감 버튼과 input[type="number"]를 결합한 수량 선택 웹 컴포넌트입니다. Shadow DOM을 사용하며, 값 변경 시 valuechange 이벤트를 발생시킵니다.

기본 사용법

<script type="module">
  if (!window.customElements.get("spin-button")) {
    import("/ui/element/spin-button.js");
  }
</script>

<spin-button value="1" min="1" max="10"></spin-button>

<script>
  const el = document.querySelector("spin-button");
  el.addEventListener("valuechange", (e) => console.log("value:", e.detail.value));
</script>

속성 (Attributes)

속성	타입	기본값	설명
value	Number	—	현재 값
min	Number	1	최솟값
max	Number	999	최댓값
step	Number	1	증감 단위
maxlength	Number	—	입력 가능한 최대 자릿수
disabled	Boolean	false	비활성화 여부

이벤트

이벤트	설명
valuechange	값이 변경될 때마다 발생 (증감 버튼 클릭, 사용자 입력, Enter/blur 검증 포함). detail.value에 현재 값이 담깁니다.

프로퍼티

• value: get/set — 현재 값 (attribute와 동기화)

CSS 변수

스타일 조정: --spin-button-width, --spin-button-height, --spin-button-font-size, --spin-button-border, --spin-button-border-radius, --spin-button-btn-width, --spin-button-btn-color 등.