Bootstrap Spinner
A spinner plugin using bootstrap elements. (Can be used without bootstrap itself)
Example
Basic example
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default" data-value="decrease" data-target="#spinner" data-toggle="spinner">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" data-ride="spinner" id="spinner" class="form-control input-number" value="1">
<span class="input-group-btn">
<button type="button" class="btn btn-default" data-value="increase" data-target="#spinner" data-toggle="spinner">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
Advanced example
Hold mouse on increase button (you must include mousehold.js)
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default" data-value="-1" data-target="#spinner2" data-toggle="spinner">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" data-ride="spinner" id="spinner2" class="form-control input-number" value="1" data-min="1" data-max="10">
<span class="input-group-btn">
<button type="button" class="btn btn-default" data-value="2" data-target="#spinner2" data-toggle="spinner" data-on="mousehold">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
Init
The plugin can be initialized several ways:
Via data-attribute
Plugin options can also be passed as data-attributes. It is advised to set data-ride="spinner" on the spinner element to avoid inconsistent values. Anyway, initialize it view javascript.
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default" data-value="-1" data-target="#spinner2" data-toggle="spinner">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" data-ride="spinner" id="spinner2" class="form-control input-number" value="1" data-min="1" data-max="10">
<span class="input-group-btn">
<button type="button" class="btn btn-default" data-value="2" data-target="#spinner2" data-toggle="spinner" data-on="mousehold">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
Via javascript
$('.spinner').spinner({
min: 0,
max: 10
});
Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-min="".
| Name | type | default | description |
|---|---|---|---|
| step | integer|float | 1 | Default step value |
| min | integer | 0 | Minimum value |
| max | integer | Infinity | Maximum value |
| strict | boolean | true | Strict check entered value (input) |
| precision | integer | 0 | Default precision |
Methods
increase()
Increase the value with the default step. Called automatically by elements (buttons) with data-value="increase"
$('.spinner').('increase')
decrease()
Same as increase() with the opposite functionality
step(value)
Override the default value of step. Can be used with data-value="integer|float value". Negative sign indicates direction.
$('.spinner').step(-1)
setOptions(options)
Set options. Function name can be omitted.
$('.spinner').spinner({min: 0, max: 10})
change(value)
Change the value. Function name can be omitted. Precision and min/max value checks apply.
$('.spinner').spinner(12)