<div role="spinbutton" aria-valuemin="0" aria-valuemax="100" aria-valuenow="10">
	<button class="js-decrease" tabindex="-1" aria-label="decrease" type="button">-</button>

	<input type="text" />

	<button class="js-increase" tabindex="-1" aria-label="increase" type="button">+</button>

	<div class="visually-hidden" aria-live="polite" aria-atomic="true"></div>
</div>
import Spinbutton from '@19h47/spinbutton';

const $element = document.querySelector('[role="spinbutton"]');
const spinbutton = new Spinbutton($element);

spinbutton.init();

Level 1

level 1

Internationalization

aria-valuetext is built with Intl.PluralRules. The locale is the closest lang; the words live in data-spinbutton-text. English treats 0 as other (« 0 barrels »), French as one (« 0 tonneau »).

English 0

0 barrels

Français 0

0 tonneau

Level 1

You can ommit the maximum and minimum values.

Or just set the minimum value.

Or just set the maximum value.

Level 5

You can change the step value with the data-spinbutton-step attribute.

Controls 1

Minimum
Maximum
Now

Checkout

Three spinbuttons share 12 seats. Each setMax is derived from what the others already took — infants cannot outnumber adults.

Adults

42 € each

Children

24 € each

Infants

Free, one per adult

Seats

3 tickets · 108 € · 9 seats left

Character

Strength 12

Dexterity 12

Constitution 12

Intelligence 12

Wisdom 12

Charisma 12