Stepper jQuery Number Input Plugin

Stepper is a  jQuery plugin for cross browser number inputs written by Ben Plum. The scipt is awesome by itself, I just added some comments and modified the CSS to make it even nicer and responsive.

HTML5 markup

This is just a regular HTML5 number type input field.

<input type="number" />
<input type="number" min="2" max="20" step="2" />

jQuery

Add jQuery and Stepper plugin to HTML, initialize the script for all number input fields.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.fs.stepper.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("input[type='number']").stepper();
});
</script>

CSS styling

<style type="text/css">
/*
 * Stepper Plugin [Formstone Library]
 * @author Ben Plum
 * @version 0.1.3
 *
 * Copyright © 2012 Ben Plum <mr@benplum.com>
 * Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
 */ 
 
/* Set border and padding values moved inward */
*{
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;	
}

/* Stepper */
.stepper{
	width: 100%;
	height: 30px;	
	margin: 0 0 10px 0;
	position: relative;
	overflow: hidden;
}
.stepper .stepper-input{
	width: 100%;
	height: 30px;
	color: #000;
	background: #FFF;
	border: 1px solid #CCC;
	margin: 0;
	padding: 1px 0 1px 5px;
	overflow: hidden;
	z-index: 49;
}
.stepper:hover .stepper-input, .stepper .stepper-input:focus {
	background-color: #F9F9F9;
}
.stepper .stepper-step {
	width: 20px;
	height: 50%;
	background: #EEE url(stepper.png) no-repeat;
	border: 1px solid #CCC;
	cursor: pointer;
	display: block;
	position: absolute;
	right: 0;
	text-indent: -99999px;
	z-index: 50;
}
.stepper .stepper-step:hover {
	background-color: #F9F9F9;
}

/* Up and Down arrows */
.stepper .stepper-step.up {
	background-position: center top;
	border-bottom: none;
	top: 0;
}
.stepper .stepper-step.down {
	background-position: center bottom;
	bottom: 0;
}

/* Disabled */
.stepper.disabled .stepper-input {
	background: #FFF;
	border: 1px solid #EEE;
	color: #CCC;
}
.stepper.disabled .stepper-step, .stepper.disabled .stepper-step:hover {
	background: #F9F9F9;
	border: 1px solid #EEE;
	cursor: default;
}
.stepper.disabled .stepper-step.up {
	background: #F9F9F9 url(stepper.png) no-repeat;
	background-position: center top;
	border-bottom: none;
	top: 0;
}
.stepper.disabled .stepper-step.down {
	background: #F9F9F9 url(../img/stepper.png) no-repeat;
	background-position: center bottom;
	bottom: 0;
}
</style>

Image

Download this image, it is necessary for the scipt.

Stepper jQuery Number Input Plugin

 

Demo »


Go Daddy


Related articles

Unordered List Style Image CSS

Unordered List Style Image CSS

06/03/2013

Learn how to style UL with any image using CSS.

OL and UL List CSS Style

OL and UL List CSS Style

03/03/2013

Styling ordered and unordered lists is easy. Just write a single line of CSS to change the list style type.

Pie Chart with Flot jQuery Plugin

Pie Chart with Flot jQuery Plugin

28/02/2013

Learn how to use the pie plugin for Flot charts.


1 comment

vignesh2013-04-18 14:17

Hi, how to get the value inside the dropdown box after i made my selection, I googled and found some events like "onSpinup" and "onSpindown", but i need to get the value after i made my selection. Is there any event like onSpinstop or anything like that..??? thanks in advance.. :)

Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the lion *


Find us on Facebook

Tags

Get online with the world's Best - GoDaddy.com!

Back to Top