<h1>Input Quantity Increment</h1> <section> <form action=""> <p class="qty"> <label for="qty">Quantity:</label> <button class="qtyminus" aria-hidden="true">&minus;</button> <input type="number" name="qty" id="qty" min="1" max="1000" step="1" value="1" /> <button class="qtyplus" aria-hidden="true">&plus;</button> </p> </form> </section>
/* Reset for the demo */ * { box-sizing: border-box; min-width: 0; min-height: 0; } body { margin: 0; font-size: 1.4rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; line-height: 1.5; color: #575757; } h1 { text-align: center; } button { padding: 0; margin: 0; border-style: none; touch-action: manipulation; display: inline-block; border: none; background: none; cursor: pointer; } /* End Reset for the demo */ /* Sass Config */ $btn_grey: #575757; /* Contrast : 7.2:1 */ /* End Sass Config */ .qty { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; label { flex: 1 0 100%; } input { width: 7rem; height: 3rem; font-size: 1.3rem; text-align: center; border: 1px solid $btn_grey; } button { width: 3rem; height: 3rem; color: #fff; font-size: 2rem; background: $btn_grey; } button.qtyminus { margin-right: 0.3rem; } button.qtyplus { margin-left: 0.3rem; } }
/* * @Adilade Input Quantity Increment * * Free to use - No warranty */ var input = document.querySelector( "#qty" ); var btnminus = document.querySelector(".qtyminus"); var btnplus = document.querySelector(".qtyplus"); if ( input !== undefined && btnminus !== undefined && btnplus !== undefined && input !== null && btnminus !== null && btnplus !== null ) { var min = Number(input.getAttribute("min")); var max = Number(input.getAttribute("max")); var step = Number(input.getAttribute("step")); function qtyminus(e) { var current = Number(input.value); var newval = current - step; if (newval < min) { newval = min; } else if (newval > max) { newval = max; } input.value = Number(newval); e.preventDefault(); } function qtyplus(e) { var current = Number(input.value); var newval = current + step; if (newval > max) newval = max; input.value = Number(newval); e.preventDefault(); } btnminus.addEventListener("click", qtyminus); btnplus.addEventListener("click", qtyplus); } // End if test

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.