Number Stepper — Keyboard Arrows, Page Up/Down, and Long-Press Acceleration

<div class="demo">
  <label class="stepper-label" for="qty">Quantity</label>
  <div class="stepper" id="stepper">
    <button type="button" class="step-btn" id="decBtn" aria-label="Decrease quantity">
      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 12h14"/></svg>
    </button>
    <input type="text" id="qty" class="step-input" value="4" inputmode="numeric" aria-live="polite" />
    <button type="button" class="step-btn" id="incBtn" aria-label="Increase quantity">
      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
    </button>
  </div>
  <p class="stepper-hint">Click and hold a button to accelerate. Arrow keys and Page Up/Down also work when focused.</p>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px; }
.demo { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 280px; max-width: 100%; }
.stepper-label { font-size: 12.5px; font-weight: 700; color: #334155; align-self: flex-start; }

.stepper { display: flex; align-items: stretch; border: 1.5px solid #e2e8f0; border-radius: 12px; overflow: hidden; background: #fff; width: 100%; }
.step-btn { width: 42px; flex-shrink: 0; border: none; background: #f8fafc; color: #475569; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.12s, color 0.12s; user-select: none; }
.step-btn:hover { background: #eef2ff; color: #4338ca; }
.step-btn:active { background: #e0e7ff; }
.step-btn:focus-visible { outline: 2px solid #6366f1; outline-offset: -2px; }
.step-btn:disabled { opacity: 0.35; cursor: not-allowed; background: #f8fafc; color: #475569; }

.step-input { flex: 1; min-width: 0; border: none; border-left: 1.5px solid #e2e8f0; border-right: 1.5px solid #e2e8f0; text-align: center; font-size: 15px; font-weight: 700; color: #0f172a; font-family: inherit; padding: 10px 4px; -moz-appearance: textfield; }
.step-input:focus-visible { outline: none; background: #f8fafc; }

.stepper-hint { font-size: 11.5px; color: #94a3b8; text-align: center; line-height: 1.5; }

const stepper = document.getElementById('stepper');
const input = document.getElementById('qty');
const decBtn = document.getElementById('decBtn');
const incBtn = document.getElementById('incBtn');

const MIN = 0;
const MAX = 99;
const STEP = 1;
const PAGE_STEP = 5;

let holdTimer = null;
let accelInterval = null;

function clamp(n) {
  return Math.min(MAX, Math.max(MIN, n));
}

function getValue() {
  const n = parseInt(input.value, 10);
  return isNaN(n) ? 0 : n;
}

function setValue(n) {
  input.value = String(clamp(n));
  updateButtonStates();
}

function updateButtonStates() {
  const n = getValue();
  decBtn.disabled = n <= MIN;
  incBtn.disabled = n >= MAX;
}

function step(delta) {
  setValue(getValue() + delta);
}

// Long-press acceleration: a short delay before repeating starts (so a single
// click doesn't double-fire), then repeats on an interval that speeds up the
// longer the button stays held — small increments become fast bulk changes
// without the user ever needing to click dozens of times.
function startHold(delta) {
  step(delta);
  clearTimers();
  holdTimer = setTimeout(() => {
    let speedMs = 160;
    const tick = () => {
      step(delta);
      speedMs = Math.max(30, speedMs - 15); // accelerate down to a 30ms floor
      accelInterval = setTimeout(tick, speedMs);
    };
    tick();
  }, 400);
}

function clearTimers() {
  if (holdTimer) clearTimeout(holdTimer);
  if (accelInterval) clearTimeout(accelInterval);
  holdTimer = null;
  accelInterval = null;
}

[decBtn, incBtn].forEach((btn) => {
  const delta = btn === decBtn ? -STEP : STEP;
  btn.addEventListener('pointerdown', (e) => { e.preventDefault(); startHold(delta); });
  btn.addEventListener('pointerup', clearTimers);
  btn.addEventListener('pointerleave', clearTimers);
  btn.addEventListener('pointercancel', clearTimers);
});

input.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowUp') { e.preventDefault(); step(STEP); }
  else if (e.key === 'ArrowDown') { e.preventDefault(); step(-STEP); }
  else if (e.key === 'PageUp') { e.preventDefault(); step(PAGE_STEP); }
  else if (e.key === 'PageDown') { e.preventDefault(); step(-PAGE_STEP); }
  else if (e.key === 'Home') { e.preventDefault(); setValue(MIN); }
  else if (e.key === 'End') { e.preventDefault(); setValue(MAX); }
});

input.addEventListener('input', () => {
  // Allow free typing, but strip non-digits live so the field never holds garbage.
  input.value = input.value.replace(/[^0-9]/g, '');
});

input.addEventListener('blur', () => setValue(getValue()));

updateButtonStates();