Number field

number.html

<div class="tm-number-input">
    <button type="button" class="tm-number-input-minus">–</button>
    <input type="number" min="1" value="1" class="uk-input">
    <button type="button" class="tm-number-input-plus">+</button>
</div>

number.js

document.addEventListener('DOMContentLoaded', function () {
    var numbers = document.querySelectorAll('.tm-number-input');
    if (numbers.length) {
        for (var i = 0; i < numbers.length; i++) {
            var number = numbers[i];
            number.querySelector('.tm-number-input-plus').addEventListener('click', function (i) {
                var input = this.parentElement.querySelector('input');
                var val = parseInt(input.value);
                var max = parseInt(input.max);
                val++;
                if (max !== NaN && val > max) { val = max; }
                input.value = val;
            });
            number.querySelector('.tm-number-input-minus').addEventListener('click', function () {
                var input = this.parentElement.querySelector('input');
                var val = parseInt(input.value);
                var min = parseInt(input.min);
                val--;
                if (min !== NaN && val < min) { val = min; }
                input.value = val;
            });
        }
    }
});

number.less

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

input[type="number"]
{
    -moz-appearance: textfield;
}

.tm-number-input
{
    .uk-flex;

    .uk-input
    {
        padding: 0;
        .size(60,36);
        text-align: center;
        color: @color-black;
        
        @media (max-width: @breakpoint-xsmall-max)
        {
            width: 36px;
        }
    }

    button
    {
        padding: 0;
        .size(25,36);
        background-color: @button-background;
        border: none;
        color: @color-black;
        cursor: pointer;

        &:hover
        {
            background-color: @button-hover-background;
        }
    }
}