Jquery Spinner Up Down

This is a jquery plugin which is spinner.




Demo | Download

If you need spinner and don’t wanna use jQuery UI, you can download and use this plugin easily.

If you don’t set anything, it start with no value
[html]<input type="number"/>[/html]

If you want to set initiak value, you can use value property
[html]<input type="number" value="0"/>[/html]

If you want to set min and max value, you can use max and min property
[html]<input type="number" min="2" max="20"/>[/html]

If you want increase the number more and one, you can use step property
[html]<input type="number" step="2" />[/html]

Html Part
[html]
<input type="number"/>
<input type="number" value="0"/>
<input type="number" min="2" max="20" step="2" />
[/html]

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

CSS Part
[css]
input.stepper-input{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

/* Stepper */
.stepper{
width: 50px;
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(images/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(images/stepper.png) no-repeat;
background-position: center top;
border-bottom: none;
top: 0;
}
.stepper.disabled .stepper-step.down {
background: #F9F9F9 url(images/stepper.png) no-repeat;
background-position: center bottom;
bottom: 0;
}
[/css]