<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();
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 »).
Three spinbuttons share 12 seats. Each
setMax is derived from what the others already took —
infants cannot outnumber adults.
42 € each
24 € each
Free, one per adult
Seats
3 tickets · 108 € · 9 seats left