Lightweight input stepper for real world usage. Check it out on JSFiddle
Download and include the javascript file.
<script src="https://github.com/AanZee/input-stepper/raw/master/jquery.input-stepper.js"></script>
Check out index.html
for all examples.
<div class="input-stepper">
<button data-input-stepper-decrease>-</button>
<input type="text">
<button data-input-stepper-increase>+</button>
</div>
Call the input stepper plugin on the desired selector
$(function () {
// Document ready
$('.input-stepper').inputStepper();
});
<div class="input-stepper-advanced">
<button class="decrease" data-decrease>-1</button>
<button class="decrease" data-decrease="5">-5</button>
<button class="decrease" data-decrease="10">-10</button>
<input type="text" value="50" min="25" max="75">
<button class="increase" data-increase>+1</button>
<button class="increase" data-increase="5">+5</button>
<button class="increase" data-increase="10">+10</button>
</div>
Call the input stepper plugin on the desired selector
$('.input-stepper-advanced').inputStepper({
selectorButtonIncrease: '.increase',
selectorButtonDecrease: '.decrease',
dataAttributeIncrease: 'increase',
dataAttributeDecrease: 'decrease'
});
The input stepper can be called with a number of options. The defaults of each option are listed below
$('.input-stepper').inputStepper({
// Values in the markup always overwrite this settings
initialValue: null,
min: 0,
max: Infinity
// The selector for the input
selectorInput: 'input',
// Selectors for the increase/decrease buttons
selectorButtonIncrease: '[data-input-stepper-increase]',
selectorButtonDecrease: '[data-input-stepper-decrease]',
// Optional data attribtus to check for how much to increase/decrease
dataAttributeIncrease: 'input-stepper-increase',
dataAttributeDecrease: 'input-stepper-decrease',
// Classname added to increase/decrease buttons when they are disabled
// The disabled property is also set
classNameDisabled: 'is-disabled'
});
If your application listens change events on the input element, it can now also listen to increase/decrease events on the input element.
<div class="input-stepper">
<button data-input-stepper-decrease>-</button>
<input id="some-input" type="text">
<button data-input-stepper-increase>+</button>
</div>
$('#some-input').on('increase', function (e, amount, plugin) {
alert('increase with: ' + amount);
});
$('#some-input').on('decrease', function (e, amount, plugin) {
alert('decrease with: ' + amount);
});
This plugin is released by Aan Zee and is mainly developed by Jeroen Ransijn