Quantity Input Demo

Default Settings

Default min=1, value=1

<quantity-input>
  <button data-action-decrement type="button">−</button>
  <input type="number" />
  <button data-action-increment type="button">+</button>
</quantity-input>

Custom Min/Max

Min=5, Max=15, Value=10

<quantity-input min="5" max="15" value="10">
  <button data-action-decrement type="button">−</button>
  <input type="number" />
  <button data-action-increment type="button">+</button>
</quantity-input>

Custom Icons

You can use any icons for the buttons

Multiple Instances

Testing multiple components on the same page:

Event Logging

Watch the console or the log below for quantity-input:change events:

Event log will appear here...