Get unlimited public & private packages + package-based permissions with npm Pro.Get started »


1.0.21 • Public • Published

Use case

This plugin extends an html input field which serves a number to be given. Handling validation and easy incrementing or decrementing of given value is provided.




Classical dom injection

You can simply download the compiled version as zip file here and inject it after needed dependencies:


<script src=""></script>
<script src=""></script>
<!--Inject downloaded file:-->
<script src="index.compiled.js"></script>
<!--Or integrate via cdn:
<script src=""></script>

The compiled bundle supports AMD, commonjs, commonjs2 and variable injection into given context (UMD) as export format: You can use a module bundler if you want.

Package managed and module bundled

If you are using npm as package manager you can simply add this tool to your package.json as dependency:


"dependencies": {
    "incrementer": "latest",

After updating your packages you can simply depend on this script and let a module bundler do the hard stuff or access it via an exported variable name in given context.


import Incrementer from 'incrementer'
class SpecialIncrementer extends Incrementer...
// or
import {$} from 'incrementer'
class SpecialIncrementer extends $.Incrementer.class ...
// or
Incrementer = require('incrementer').default
value instanceof Incrementer
// or
$ = require('incrementer').$


1. Load needed dependencies


const dependenciesLoadPromise = $documentationWebsite.getScript(
).then(() => $.getScript(
    '' +
)).then(() => $.getScript(
    '' +

2. Set your styles


body form div.incrementer > input.form-control {
    width: 61px;
    float: left;
body form div.incrementer >,
body form div.incrementer > a.minus {
    font-size: 24px;
    font-weight: bold;
    margin: 10px;

3. Initialize you incrementer (when everything is loaded)


dependenciesLoadPromise.then(() => $(
    'body form.first input'

4. Define you number input field


<form class="first" action="#">
    <input name="test" value="4" class="form-control" />

Example with more than one input


    dependenciesLoadPromise.then(() => {
        $('body form.second input.first').Incrementer({
            step: 2, minimum: 10, maximum: 20, logging: true
        $('body form.second input.second').Incrementer({
            step: 3, minimum: 5, maximum: 30, logging: true
<form class="second" action="#">
    <input name="test" value="10" class="form-control first" />
    <input name="test" value="12" class="form-control second" />

Advanced example with all available (default) options


    dependenciesLoadPromise.then(() => $(
        'body form.third input'
        onInvalidNumber: $.noop(),
        onTypeInvalidLetter: $.noop(),
        step: 1,
        minimum: 0,
        maximum: 9999,
        domNode: {
            plus: '>',
            minus: '> a.minus'
        neededMarkup: `
            <a href="#" class="plus">+</a>
            <a href="#" class="minus">-</a>
<form class="third" action="#">
    <input name="test" value="50" class="form-control" />



npm i incrementer

DownloadsWeekly Downloads






Last publish


  • avatar