Поле ввода количества: js, обрабатывающий нажатия кнопок

src/blocks/field-num/bg-img/minus.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 357 357"><path d="M357 204H0v-51h357v51z"/></svg>

src/blocks/field-num/bg-img/plus.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 357 357"><path d="M357 204H204v153h-51V204H0v-51h153V0h51v153h153v51z"/></svg>

src/blocks/field-num/field-num.js

 /* global document */
 
-const closest = require('closest');
 const ready = require('../../js/utils/documentReady.js');
 
 ready(function(){
@@ -8,17 +7,19 @@ ready(function(){
   var fields = document.querySelectorAll( '.field-num' );
   Array.prototype.forEach.call( fields, function( field ) {
     const input = field.querySelector('.field-num__input');
-    const btnPlus = field.querySelector('.field-num__btn--plus');
-    const btnMinus = field.querySelector('.field-num__btn--minus');
-    const valueMin = input.getAttribute('min') ? input.getAttribute('min') : -Infinity;
-    const valueMax = input.getAttribute('max') ? input.getAttribute('max') : Infinity;
-    const valueStep = input.getAttribute('step') ? input.getAttribute('step') : 1;
-    // console.log(input, btnMinus, btnPlus);
-    // console.log(valueMin, valueMax, valueStep);
-    // Нажатия кнопок
+    const valueMin = input.getAttribute('min') ? +input.getAttribute('min') : -Infinity;
+    const valueMax = input.getAttribute('max') ? +input.getAttribute('max') : Infinity;
+    const valueStep = input.getAttribute('step') ? +input.getAttribute('step') : 1;
     field.addEventListener('click', function(event){
-      if(event.target.classList.contains('field-num__btn')) {
-        // это клик по кнопке
+      if(event.target.classList.contains('field-num__btn') && !input.getAttribute('disabled')) {
+        let num = parseInt(input.value);
+        if(isNaN(num)) num = 0;
+        if(event.target.classList.contains('field-num__btn--plus')) {
+          if (num < valueMax) input.value = num + valueStep;
+        }
+        if(event.target.classList.contains('field-num__btn--minus')) {
+          if (num > valueMin) input.value = num - valueStep;
+        }
       }
     });
   });

src/blocks/field-num/field-num.scss

@@ -42,9 +42,8 @@
     padding: 0;
     border-top-right-radius: $border-radius;
     border-bottom-right-radius: $border-radius;
-    font-size: $font-size + 6;
-    font-weight: 700;
-    text-align: center;
+    font: 0/0 a; // stylelint-disable-line
+    color: transparent;
     background: transparent;
 
     &:hover,
@@ -59,10 +58,14 @@
 
     &--plus {
       right: 1px;
+      background: svg-load('../field-num/bg-img/plus.svg') center no-repeat;
+      background-size: 14px 14px;
     }
 
     &--minus {
       left: 1px;
+      background: svg-load('../field-num/bg-img/minus.svg') center no-repeat;
+      background-size: 14px 14px;
     }
 
     #{$block-name}--disabled & {
@@ -70,7 +73,7 @@
 
       &:hover,
       &:focus {
-        background: transparent;
+        background-color: transparent;
       }
     }
   }

src/scss/mixins/form-mixins.scss

@@ -2,6 +2,7 @@
   display: inline-block;
   vertical-align: middle;
   width: 100%;
+  min-height: calc(#{$line-height}em + #{$field-padding-vertical} + #{$field-padding-vertical} + 2px); // Привет, IE
   margin: 0;
   border: 1px solid $border-color;
   border-radius: $border-radius;