<input type="number" min="0" step="0.05">

<input type="number" min="1" max="3" step="0.05">
.quantity-number {
  display: inline;
  border: 1px solid grey;
  padding: 4px 0px;
}
.quantity-number input {
  border: none;
  padding: 5x 10px;
}
.quantity-number button {
  background-color: grey;
  border: none;
  padding: 6px 10px;
}
/**
  * Minus and Plus buttons to NUMBER type INPUTS
  */
		
// Wrap number input with a class
const inputNumber = $("input[type='number']");
inputNumber.wrap("<div class=\"quantity-number\"></div>");

// Add minus and plus button before and after number inputs
$('<button type="button" class="minus-button">-</button>').insertBefore("input[type='number']");
$('<button type="button" class="plus-button">+</button></div>').insertAfter("input[type='number']");

// Functions on each button
const minusButton = $(".minus-button");
const plusButton = $(".plus-button");

minusButton.each(function (index) {
  $(this).on("click", function (evt) {
	  let inputNumber = $(evt.target).next("input[type='number']");
		inputNumber[0].stepDown();
		inputNumber.change();
	})
});

plusButton.each(function (index) {
	$(this).on("click", function (evt) {
    let inputNumber = $(evt.target).prev("input[type='number']");
		inputNumber[0].stepUp();
		inputNumber.change();
	})
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js