숫자 입력

<div class="niw">
  <span class="nilabel">수량</span>
  <div class="nigroup" role="group" aria-label="수량 선택">
    <button class="nibtn" id="nidn" aria-label="1 감소">−</button>
    <input class="niinput" id="nival" type="text" inputmode="numeric" role="spinbutton" aria-valuenow="4" aria-valuemin="1" aria-valuemax="10" aria-label="수량" value="4">
    <button class="nibtn" id="niup" aria-label="1 증가">+</button>
  </div>
</div>

.niw{position:absolute;inset:0;display:grid;place-items:center;gap:8px}
.nilabel{color:var(--muted);font-size:10px}
.nigroup{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.nibtn{width:34px;border:0;background:var(--bg);color:var(--fg);font-size:16px;cursor:default;display:grid;place-items:center}
.nibtn:disabled{opacity:.35}
.niinput{width:44px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-size:14px;font-weight:700;color:var(--fg);background:var(--surface)}

const val = document.getElementById('nival'), dn = document.getElementById('nidn'), up = document.getElementById('niup');
let n = 4;
function paint() { val.value = String(n); val.setAttribute('aria-valuenow', String(n)); dn.disabled = n <= 1; up.disabled = n >= 10; }
function step(delta) { n = Math.min(10, Math.max(1, n + delta)); paint(); }
let auto = true, dir = 1;
dn.addEventListener('click', () => { auto = false; step(-1); });
up.addEventListener('click', () => { auto = false; step(1); });
paint();
setInterval(() => {
  if (!auto) return;
  if (n >= 10) dir = -1;
  if (n <= 1) dir = 1;
  step(dir);
}, 700);