Beautiful Number Spinner In Pure JavaScript – Quantity Input

Category: Form , Javascript | January 19, 2019
Views Total:22,000 views
Official Page:Go to website
Last Update:January 19, 2019


Beautiful Number Spinner In Pure JavaScript – Quantity Input


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 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';

Create the HTML for the quantity input.

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

The JavaScript to enable the quantity input.

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

You Might Be Interested In:

Leave a Reply