jquery.stepper.js
Lightweight input stepper. Check it out on Codepen (with touch events for mobile)
Features
- Works on input type="text"
- Set initial values in the markup or Javascript
- Optionally configure min/max values with attributes
Install
Download and include the javascript file.
<script src="jquery.stepper.js"></script> <link href="style.css" media="all" rel="stylesheet" />Basic usage
Check out index.html for all examples.
<div class="stepper" id="stepper_1"> <div class="stepper-progress"></div> <input type="text" class="stepper-number"> </div> Call the input stepper plugin on the desired selector
$(function () { // Document ready $('#stepper_1').stepper(); });Advanced usage
<div class="stepper"> <div class="stepper-progress"></div> <input type="text" class="stepper-number" min="10" max="90" onChange="console.log('changed value =' + this.value);"> </div>Another example :
<div class="stepper"> <div class="stepper-progress"></div> <input type="text" class="stepper-number" unit="px" min="10" max="90" step="5" value="50" onChange="console.log('changed value =' + this.value);"> </div>Override properties like the input stepper plugin on the desired selector
$('#stepper_3').stepper({ selectorProgressBar: '.stepper-progress', selectorInputNumber: '.stepper-number', classNameChanging: 'is-changing', decimals: 2, unit: 'px', value: 50, min: -200, max: 200, step: 5 }); Default settings
The input stepper can be called with a number of options. The defaults of each option are listed below
$('#stepper_3').stepper({ selectorProgressBar: '.stepper-progress', selectorInputNumber: '.stepper-number', classNameChanging: 'is-changing', decimals: 0, unit: '%', value: '', min: 0, max: 100, step: 1 });License
This plugin is under MIT License.
