jquery.input-stepper.js

Lightweight input stepper for real world usage. Check it out on JSFiddle

Features

Works on input type="text"
Only supports positive integers (0 - Infinity)
Set initial values in the markup or Javascript
Optionally configure min/max values with attributes
Supports keyboard interaction (increase/decrease by 10 by holding shift)
Enables number pad on mobile browsers

Install

Download and include the javascript file.

<script src="https://github.com/AanZee/input-stepper/raw/master/jquery.input-stepper.js"></script>

Basic usage

Check out index.html for all examples.

<div class="input-stepper">
    <button data-input-stepper-decrease>-</button>
    <input type="text">
    <button data-input-stepper-increase>+</button>
</div>

Call the input stepper plugin on the desired selector

$(function () {
    // Document ready
    $('.input-stepper').inputStepper();
});

Advanced usage

<div class="input-stepper-advanced">
    <button class="decrease" data-decrease>-1</button>
    <button class="decrease" data-decrease="5">-5</button>
    <button class="decrease" data-decrease="10">-10</button>
    <input type="text" value="50" min="25" max="75">
    <button class="increase" data-increase>+1</button>
    <button class="increase" data-increase="5">+5</button>
    <button class="increase" data-increase="10">+10</button>
</div>

Call the input stepper plugin on the desired selector

$('.input-stepper-advanced').inputStepper({
    selectorButtonIncrease: '.increase',
    selectorButtonDecrease: '.decrease',
    dataAttributeIncrease: 'increase',
    dataAttributeDecrease: 'decrease'
});

Default settings

The input stepper can be called with a number of options. The defaults of each option are listed below

$('.input-stepper').inputStepper({

    // Values in the markup always overwrite this settings
    initialValue: null,
    min: 0,
    max: Infinity

    // The selector for the input
    selectorInput: 'input',

    // Selectors for the increase/decrease buttons
    selectorButtonIncrease: '[data-input-stepper-increase]',
    selectorButtonDecrease: '[data-input-stepper-decrease]',

    // Optional data attribtus to check for how much to increase/decrease
    dataAttributeIncrease: 'input-stepper-increase',
    dataAttributeDecrease: 'input-stepper-decrease',

    // Classname added to increase/decrease buttons when they are disabled
    // The disabled property is also set
    classNameDisabled: 'is-disabled'
});

Custom events on the input element

If your application listens change events on the input element, it can now also listen to increase/decrease events on the input element.

<div class="input-stepper">
    <button data-input-stepper-decrease>-</button>
    <input id="some-input" type="text">
    <button data-input-stepper-increase>+</button>
</div>

$('#some-input').on('increase', function (e, amount, plugin) {
    alert('increase with: ' + amount);
});

$('#some-input').on('decrease', function (e, amount, plugin) {
    alert('decrease with: ' + amount);
});

Authors

This plugin is released by Aan Zee and is mainly developed by Jeroen Ransijn

AanZee / input-stepper

readme