Spinbutton 

<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>
import Spinbutton from '@19h47/spinbutton';

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

spinbutton.init();

Level 1

level 1

Level 1

You can set the single and plural text by using the text option : { text: { single: 'level', plural: 'levels' } } or the data-spinbutton-text='{"single":"level","plural":"levels"}' attribute.

level 1

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

Character

Strength 12

Dexterity 12

Constitution 12

Intelligence 12

Wisdom 12

Charisma 12