<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();
})
});
This Pen doesn't use any external CSS resources.