jQuery Plugin For Selecting Numbers By Typing Or Clicking - spinner

spinner is a simple and fast jQuery plugin for creating a number selector widget that allows you to select numbers by clicking the up/down button or entering a custom number.

How to use it:

1. Include jQuery library and jQuery spinner plugin on the page

<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

2. Create a container for the number selector

<input type="text" class="demo"/>

3. The CSS

.spinner-sprite, .spinner .decrease, .spinner .decrease[disabled], .spinner .increase, .spinner .value, .spinner .value.passive {
background: url('spinner-sf0d5bd965d.png') no-repeat
}
.spinner {
height: 25px;
width: 71px;
overflow: hidden;
*zoom:1;
-webkit-box-shadow: 0 3px 3px -4px #aaa;
-moz-box-shadow: 0 3px 3px -4px #aaa;
box-shadow: 0 3px 3px -4px #aaa
}
.spinner button, .spinner .value {
text-align: center;
display: block;
float: left;
height: 100%;
line-height: 25px;
margin: 0
}
.spinner button {
border: none;
width: 23px;
color: #e5312a;
font: 22px Arial bold;
padding: 0;
outline: none
}
.spinner .decrease {
background-position: 0 -50px;
cursor: pointer;
text-indent: -10000px
}
.spinner .decrease[disabled] {
background-position: 0 -75px;
cursor: default
}
.spinner .increase {
background-position: 0 0;
cursor: pointer;
text-indent: -10000px
}
.spinner .value {
background-position: 0 -100px;
width: 24px;
height: 27px;
border: none;
font-family: Arial;
color: #ffffff;
padding: 0px
}
.spinner .value.passive {
background-position: 0 -25px;
color: #919191
}
.spinner .error, .spinner .invalid {
background: #aa0000
}

4. Call the plugin

<script type="text/javascript">
    $('.demo').spinner()
</script>

---

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