Beautiful Number Spinner In Pure JavaScript – Quantity Input

Preview:

Description:

The Quantity Input library helps you create a beautiful number input spinner to spin quantities with increase and decrease buttons.

How to use it:

Install the Quantity Input.

# NPM
$ npm install @ohepworthbell\quantityinput --save

Import the main stylesheet into the document.

<link href="./style.css" rel="stylesheet" type="text/css" />

Import the Quantity Input as a module.

<script type="module">
  import QuantityInput from './quantity.js';
</script>

Create the HTML for the quantity input.

<fieldset data-quantity>
  <legend>Change quantity</legend>
</fieldset>

The JavaScript to enable the quantity input.

(function(){
  let quantities = document.querySelectorAll('[data-quantity]');
  if (quantities instanceof Node) quantities = [quantities];
  if (quantities instanceof NodeList) quantities = [].slice.call(quantities);
  if (quantities instanceof Array) {
    quantities.forEach(div => (div.quantity = new QuantityInput(div, 'Down', 'Up')));
  }
})();