UIkit3 number

uk-number.css

[input-number] input,
[input-number] input:focus,
[input-number] input:hover,
[input-number] input:active {
	-webkit-appearance: textfield;
	-moz-appearance: textfield;
	appearance: textfield;
	padding-right: 42px;
	box-sizing: border-box;
}

[input-number] input::-webkit-outer-spin-button,
[input-number] input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

[input-number] .uk-form-icon-flip ~ .uk-input {
	padding-right: 62px !important;
}

uk-number.html

<div class="uk-position-relative uk-inline" input-number>
	<input id="quantity" type="number" name="quantity" class="uk-input" step="1" min="1" value="1" />
	<div class="uk-position-center-right">
		<a class="plus uk-text-success"
		   uk-icon="icon: triangle-up"></a>
		<hr class="uk-margin-remove">
		<a class="minus uk-text-danger"
		   uk-icon="icon: triangle-down"></a>
	</div>
</div>

uk-number.js

document.addEventListener("DOMContentLoaded", function () {
	// Number input
	document.querySelectorAll('[input-number]').forEach(function (block) {
		block.querySelector('.plus').addEventListener('click', function () {
			changeValue('plus');
		});
		block.querySelector('.minus').addEventListener('click', function () {
			changeValue('minus');
		});

		function changeValue(type) {
			let input = block.querySelector('input');
			if (type === 'plus') {
				input.stepUp();
			} else if (type === 'minus') {
				input.stepDown();
			}
			input.dispatchEvent(new Event('change', {'bubbles': true}))
		}
	});
});