Stepper — Cider UI

Selectors

.stepper: Container for the stepper control. Add data-stepper to enable JS behavior.
[data-stepper-decrement]: Decrement button.
[data-stepper-increment]: Increment button.
[data-stepper-value] / <output>: Optional value display between the buttons.
data-min / data-max / data-step / data-value: Attributes on the .stepper element to configure range and initial value.
data-for: ID of an external <input> to keep in sync.

Default

HTML

<div class="stepper" data-stepper data-min="0" data-max="10" data-value="3">
  <button data-stepper-decrement aria-label="Decrement">&minus;</button>
  <button data-stepper-increment aria-label="Increment">+</button>
</div>

With Value

HTML

<div class="stepper" data-stepper data-min="0" data-max="10" data-value="5">
  <button data-stepper-decrement aria-label="Decrement">&minus;</button>
  <output>5</output>
  <button data-stepper-increment aria-label="Increment">+</button>
</div>

Linked Input

Qty:

HTML

<div class="flex items-center gap-3">
  <div class="stepper" data-stepper data-min="0" data-max="99" data-step="1" data-value="1" data-for="qty">
    <button data-stepper-decrement aria-label="Decrement">&minus;</button>
    <output>1</output>
    <button data-stepper-increment aria-label="Increment">+</button>
  </div>
  <label class="text-sm text-tertiary-foreground">
    Qty: <input id="qty" type="number" min="0" max="99" value="1" class="w-16 rounded-[var(--radius-sm)] border border-border-solid px-2 py-1 text-center text-sm" />
  </label>
</div>

Usage

Include the stepper JS to enable increment/decrement behavior, value display updates, and boundary clamping.

<!-- npm -->
<script src="node_modules/ciderui/js/cider.js"></script>

<!-- CDN -->
<script src="https://cdn.jsdelivr.net/gh/newlix/ciderui@main/js/cider.js"></script>

Events

A change event fires on the stepper element whenever the value changes. The new value is available in event.detail.value.

document.querySelector('[data-stepper]')
  .addEventListener('change', (e) => {
    console.log('New value:', e.detail.value);
  });

Accessibility

Use aria-label on each button to identify its action for screen readers.
Buttons are automatically disabled at min/max boundaries.
The <output> element is natively associated with form controls by assistive technology.
Use data-for to link to a visible <input> so users can also type a value directly.