Adjust quantity in input field

by nicosa

HTML

<div class="quantity-control">
  <button class="quantity-decrease">-</button>
  <input type="number" class="quantity-input" value="1" min="1">
  <button class="quantity-increase">+</button>
</div>

<div class="quantity-control">
  <button class="quantity-decrease">-</button>
  <input type="number" class="quantity-input" value="1" min="1">
  <button class="quantity-increase">+</button>
</div>

CSS

.quantity-control {
  display: flex;
  align-items: center;
}

.quantity-control button {
  width: 30px;
  height: 30px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  cursor: pointer;
  font-size: 16px;
}

.quantity-input {
  width: 50px;
  height: 28px;
  text-align: center;
  margin: 0 5px;
  border: 1px solid #ddd;
}

/* Hide number input arrows */
.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.quantity-input {
  -moz-appearance: textfield;
}

JavaScript

$(document).ready(function() {
  // Increase quantity
  $('.quantity-increase').click(function() {
    var input = $(this).siblings('.quantity-input');
    var value = parseInt(input.val()) || 0;
    input.val(value + 1);
  });
  
  // Decrease quantity (won't go below 1)
  $('.quantity-decrease').click(function() {
    var input = $(this).siblings('.quantity-input');
    var value = parseInt(input.val()) || 0;
    if (value > 1) {
      input.val(value - 1);
    }
  });
  
  // Ensure value doesn't go below 1 on manual input
  $('.quantity-input').on('change', function() {
    var value = parseInt($(this).val()) || 1;
    if (value < 1) {
      $(this).val(1);
    }
  });
});