bs-number-incrementer
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://jaaulde.com/template-manager/template-manager.min.js"></script>
<div class="container">
<input type="number" id="quant" name="quant" value="6" placeholder="6" min="6" max="10">
</div>
CSS
div.container {
padding: 25px;
}
JavaScript
/* jslint */
/**
* @file A jQuery/Boostrap based widget for use on text and number inputs to
* turn them into Bootstrap input groups with plus and minus buttons for
* incrementing and decrementing the input's numeric value.
* @version 1.0.0
* @copyright Jim Auldridge <[email protected]> 2016
* @license MIT
* @see {@link https://github.com/JAAulde/bootstrap-number-incrementer|GitHub Repository}
* @see {@link http://getbootstrap.com/|Bootstrap}
* @see {@link https://jquery.com/|jQuery}
*/
(function (context) {
'use strict';
var parseInt = context.parseInt,
$ = context.jQuery,
template_manager = context.template_manager,
jQProp = $.fn.prop,
jQAttr = $.fn.attr,
defaults = {
width_factor: 'dynamic', // 'range', 'dynamic', ALL OTHER,
wrapper_class: null,
input_class: null,
incrementer_class: null,
decrementer_class: null
},
consts = {
CLASS_NAME_INPUT: 'bs-number-incremented',
CLASS_NAME_WRAPPER: 'bs-number-incrementer',
NAMESPACE_EVENTS: 'bs-number-incrementer',
DATA_PROPERTY_WIDGET_DATA: 'widgetData'
},
getWrapper = function () {
if (!getWrapper.$) {
getWrapper.$ = $(template_manager.get('partials/wrapper.html'));
}
return getWrapper.$.clone();
},
setWrapperWidth = function (wrapper) {
var input = wrapper.find('input.' + consts.CLASS_NAME_INPUT),
options = input.data(consts.DATA_PROPERTY_WIDGET_DATA).options,
min,
max,
len;
switch (options.width_factor) {
case 'range':
min = (input.attr('min') || '').length;
max = (input.attr('max') || '').length;
len = (min > max ? min : max) * 0.75;
wrapper.width((7 + (len || 1)) + 'em');
...