Here i have explained how to create number incrementers with plus minus buttons using jQuery and CSS.
At first attach below jQuery file with head tag.
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
Now lets start step by step.
Step 1: Add below HTML Markup.
<div class="quantity"><input type="number" min="0" max="9" step="1" value="0">
</div>
Step 2: Add the below CSS with style tag.
.quantity {
position: relative;
width: 100%;
margin-bottom: 20px;
}
.quantity input[type=number] {
-moz-appearance: textfield;
}
.quantity input {
width: 60px;
padding: 0px;
padding-left: 10px;
margin-bottom: 10px;
}
.quantity input:focus {
outline: 0;
}
.quantity-button {
cursor: pointer;
border: solid 1px solid #eee;
width: 26px;
text-align: center;
color: #333;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.quantity-button.quantity-up,
.quantity-button.quantity-down,
.quantity input {
border: solid 1px #ccc;
display: inline-block;
height: 42px;
line-height: 40px;
}
.quantity-button.quantity-up {}
.quantity-button.quantity-down {
float: left
}
Step 3: Add the below javascript with script tag.
jQuery('<div class="quantity-button quantity-up">+</div><div class="quantity-button quantity-down">-</div>').insertAfter('.quantity input');
jQuery('.quantity').each(function () {
var spinner = jQuery(this),
input = spinner.find('input[type="number"]'),
btnUp = spinner.find('.quantity-up'),
btnDown = spinner.find('.quantity-down'),
min = input.attr('min'),
max = input.attr('max');
btnUp.click(function () {
var oldValue = parseFloat(input.val());
if (oldValue >= max) {
var newVal = oldValue;
} else {
var newVal = oldValue + 1;
}
spinner.find("input").val(newVal);
spinner.find("input").trigger("change");
});
btnDown.click(function () {
var oldValue = parseFloat(input.val());
if (oldValue <= min) {
var newVal = oldValue;
} else {
var newVal = oldValue - 1;
}
spinner.find("input").val(newVal);
spinner.find("input").trigger("change");
});
});
Screenshot