jQuery Plugin For Input Counter – jquery.input-counter.js

InputCounter is a simple but powerful jQuery plugin for a input counter. It is lightweight Bootstrap compatible jQuery input spinner plugin to increments and decrements numeric values with plus/minus buttons.
input-spinner


Libraries

Load the following jQuery and Plugins library on page.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.input-counter.min.js"></script>

HTML

The vary basic HTML to display input spinner.

<div class="input-counter input-group">
    <div class="input-group-prepend">
        <button type="button" class="btn-add btn btn-primary">
            <i class="fa fa-plus"></i>
        </button>
    </div>
    <input type="text" class="form-control counter" data-default="1" data-min="0" data-max="100">
    <div class="input-group-append">
        <button type="button" class="btn-subtract btn btn-primary">
            <i class="fa fa-minus"></i>
        </button>
    </div>
</div>



JS

Call the plugin’s function to enable the input spinner.

$(".input-counter").inputCounter();

Use following option to customize input spinner.

var options = {
    selectors: {
        addButtonSelector: '.btn-add',              // the selector for the add button
        subtractButtonSelector: '.btn-subtract',    // the selector for the subtract button
        inputSelector: '.counter',                  // the selector for the <input />-field
    },
    settings: {
        checkValue: true,                           // if true, verifies that the new value is within the min and max values
        isReadOnly: true,                           //^if true, set the input-field as readonly
    },
};

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by lk-code. Visit their official github repository for more information and follow for future updates.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.