@19h47/spinbutton
A spinbutton is an input widget that restricts its value to a set or range of discrete values.
HTML
<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="number" />
<button class="js-increase" tabindex="-1" aria-label="increase" type="button">+</button>
</div>
JavaScript
import SpinButton from '@19h47/spinbutton';
const $element = document.querySelector('[role="spinbutton"]');
const spinbutton = new SpinButton($element);
spinbutton.init();
Events
Event |
Args |
Description |
SpinButton.change |
value |
Return the current activate value |
import SpinButton from '@19h47/spinbutton';
const $element = document.querySelector('[role="spinbutton"]');
const spinbutton = new SpinButton($element);
spinbutton.init();
spinbutton.on('SpinButton.change', value => {
console.log(value);
});
Options
Option |
Type |
|
text |
object |
Object containing single and plural text. Can be set as data attribute data-spinbutton-text |
Keyboard Support
The spin buttons provide the following keyboard support described in the spin button design pattern.
Key |
Function |
Down Arrow |
Decreases value 1 step. |
Up Arrow |
Increases the value 1 step. |
Page Down |
Decreases the value 5 steps. |
Page Up |
Increases the value 5 steps. |
Home |
Decreases to mimimum value. |
End |
Increases to maximum value. |
Role, Property, State, and Tabindex Attributes
Role |
Attribute |
Element |
Usage |
spinbutton |
|
div |
Identifies the div element as a spinbutton. |
References
Spin Button Design Pattern in WAI-ARIA Authoring Practices 1.1