Simple jQuery Plugin For Cross Browser Number Inputs - Stepper

File Size: 14.2 KB
Views Total: 8579
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple jQuery Plugin For Cross Browser Number Inputs - Stepper

Stepper is a simple and cross-browser jQuery plugin for number input fields, which will will automatically detect the minimum, maximum and increment values based on the min, max and step attributes.

Basic Usage:

1. Include jQuery library and jQuery Stepper plugin on your html page

<script src=""></script>
<script src="jquery.fs.stepper.min.js"></script>

2. Include jQuery Stepper to style the input field

<link href="jquery.fs.stepper.css" rel="stylesheet" type="text/css">

3. Create a number input field with custom attributes

<form action="#" method="GET">
	<input type="number" value="8" min="2" max="20" step="2" />

4. Call the plugin

$(document).ready(function() {

5. Default options.

$(document).ready(function() {
customClass: "", // Class applied to instance
labels: {
up: "Up", // Up arrow label
down: "Down" // Down arrow label

Change log:

v3.0.7 (2014-05-07)

  • Adding keyboard control;

v3.0.6 (2014-03-26)

  • Fixing display issues on Firefox 29

v3.0.5 (2014-02-07)

  • Fixing data checks;

v3.0.4 (2014-01-30)

  • Added custom label options

v3.0.1 (2014-01-13)

  • Fixing public method order;

v0.1.5 (2013-07-28)

  • Fixing disabled state.

v0.1.4 (2013-07-28)

  • Fixing Webkit default styles.

This awesome jQuery plugin is developed by benplum. For more Advanced Usages, please check the demo page or visit the official website.