Simple Number Spinner with jQuery and CSS3 - Simple Spinner

A super tiny jQuery number picker plugin which converts a stylish number input into a number spinner with "+" and "-" controls.

See also:

• Input Number Spinner with jQuery and Bootstrap - Spinner
• Simple Number Spinner Input Plugin For jQuery - DP Number Picker
• Touch-Friendly jQuery Input Spinner Plugin For Bootstrap 3 - TouchSpin
• jQuery Plugin For Selecting Numbers By Typing Or Clicking - spinner

How to use it:

1. Include the latest version of jQuery library at the bottom of your page so the pages load faster.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2. Create a standard number input on your web page.

<input type="number" min="1" max="100" value="1" />

3. The required CSS to style the number input. Tweak the following CSS snippets as you wish to create your own style.

input[type=number] {
  float: left;
  width: 70px;
  height: 35px;
  padding: 0;
  font-size: 1.2em;
  text-transform: uppercase;
  text-align: center;
  color: #93504C;
  border: 2px #93504C solid;
  background: none;
  outline: none;
  pointer-events: none;
}

span.spinner {
  position: absolute;
  height: 40px;
  user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

span.spinner > .sub,
span.spinner > .add {
  float: left;
  display: block;
  width: 35px;
  height: 35px;
  text-align: center;
  font-family: Lato;
  font-weight: 700;
  font-size: 1.2em;
  line-height: 33px;
  color: #93504C;
  border: 2px #93504C solid;
  border-right: 0;
  border-radius: 2px 0 0 2px;
  cursor: pointer;
  transition: 0.1s linear;
  -o-transition: 0.1s linear;
  -ms-transition: 0.1s linear;
  -moz-transition: 0.1s linear;
  -webkit-transition: 0.1s linear;
}

span.spinner > .add {
  top: 0;
  border: 2px #93504C solid;
  border-left: 0;
  border-radius: 0 2px 2px 0;
}

span.spinner > .sub:hover,
span.spinner > .add:hover {
  background: #93504C;
  color: #25323B;
}
 input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
 -webkit-appearance: none;
}

4. The Javascript to enable the spinner.

<script>
(function($) {
$.fn.spinner = function() {
this.each(function() {
var el = $(this);

// add elements
el.wrap('<span class="spinner"></span>');     
el.before('<span class="sub">-</span>');
el.after('<span class="add">+</span>');

// substract
el.parent().on('click', '.sub', function () {
if (el.val() > parseInt(el.attr('min')))
el.val( function(i, oldval) { return --oldval; });
});

// increment
el.parent().on('click', '.add', function () {
if (el.val() < parseInt(el.attr('max')))
el.val( function(i, oldval) { return ++oldval; });
});
    });
};
})(jQuery);

$('input[type=number]').spinner();
</script>

---

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