qua

@ohepworthbell/quantityinput

Add a lightweight, dependency-free, vanilla JavaScript-based quantity form element to your web forms

Showing:

Popularity

Downloads/wk

6

GitHub Stars

13

Maintenance

Last Commit

3yrs ago

Contributors

0

Package

Dependencies

0

Size (min+gzip)

0.5KB

License

GPL-3.0-or-later

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Quantity Input

JavaScript snippet to create a super-light-weight (1.49kb uncompressed, 0.71kb compressed, 0.35kb gzipped), usable and reliable quantity input that replaces the horrible, fiddly little input buttons built in to the number input in the browser. It is written using ES6 modules, so will need to be transpiled for older browsers.

Installation

You can install either by copying the files from this repository or running npm i @ohepworthbell\quantityinput

How to use it

HTML

<fieldset id="your-element"></fieldset>

Javascript

// export default class QuantityInput { ... }

// Import QuantityInput.js (ES6)
import QuantityInput from './quantityinput.js';

// Get element to add QuantityInput to
let element = document.getElementById('your-element');

/**
 * @class
 * @function QuantityInput
 * @param element the wrapping element to display the form
 * @param {String} decreaseText (optional) text for 'decrease' button
 * @param {String} increaseText (optional) text for 'increase' button
 */
new QuantityInput(element);
new QuantityInput(element, decreaseText, increaseText);

// Example
element.changeQuantity = new QuantityInput(element, 'Minus 1', 'Add 1'));

To do

  • Provide transpiled/compressed variants
  • Allow for typing in numbers to input (including pattern regex for smartphones/tablets)

Feedback

Any feedback or bugs, please raise an issue

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100