Вам знаком тип полей формы HTML – number? Предлагаем Вам плагин JS для модернизации данного типа, который улучшит Ваш UI.
Если с демо-страницы Вы не поняли в чем дело, то просто наведите на поля с правого столбика и попробуйте перетаскивать значения. То есть, Вы будете предлагать пользователям не тянуться к клавиатуре или щелкать мышью на стрелочки, а просто лениво потянуть курсором вправо или влево. Гениально.
Использование плагина JS для кастомизации полей формы:
Подключаем саму библиотекку
<script src="src/numscrubber.js"></script>
Или из CDN репозитория
<script src="https://rawgit.com/mburakerman/numscrubberjs/master/src/numscrubber.js"></script>
И теперь просто задаем атрибут data-numscrubber
<input data-numscrubber type="number" value="6" min="4" max="50" />
Последнее, что остается сделать – вызвать плагин
<script>
Numscrubber.init();
</script>
Плагин очень легкий и не требует зависимостей. Скачать его Вы можете по ссылке выше. Удачи!