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.
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', subtractButtonSelector: '.btn-subtract', inputSelector: '.counter', // the selector for the <input />-field }, settings: { checkValue: true, isReadOnly: true, }, }; |
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.