Draggable Input / Number Spinner With jQuery And jQuery UI - Scrubber

Scrubber is a jQuery plugin  to enhance the default 'number' input that allows you to increment and decrement the input's numeric value via mouse drag. Based on jQuery UI's drag and drop widget.

How to use it:

1. The Scrubber plugin requires both jQuery and jQuery UI loaded in the webpage.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-ui.min.js"></script>

2. Create a normal number input and set the max/min values.

<input class="inputNumber black" type="number" min="0" max="150" value="0" />
<div class="slider sliderBlack"></div>

3. Style the number input and slider handle.

.slider {
  position: absolute;
  left: 50%;
  margin-left: -101px;
  top: 10px;
  opacity: 0;
  cursor: e-resize !important;
}

.inputNumber {
  position: relative;
  margin-bottom: 20px;
  width: 200px;
  height: 35px;
  padding: 3px 6px;
  font-size: 16px;
  border-radius: 5px;
  outline: none;
  cursor: e-resize !important;
}

.ui-slider {
  height: 40px !important;
  top: 0px !important;
  border-radius: 5px !important;
  cursor: e-resize !important;
}

.ui-slider-handle {
  background: red !important;
  height: 40px !important;
  top: -1px !important;
  outline: none !important;
  cursor: e-resize !important;
}

.black {
  border: 2px solid #333;
  background: #222;
  color: #fff;
}

4. The main jQuery script.

$(function() {
  var inputMinBlack = parseInt($(".black").attr("min"), 10);
  var inputMaxBlack = parseInt($(".black").attr("max"), 10);

  var inputWidth = parseInt($(".inputNumber").innerWidth(), 10);

  $(".slider").width(inputWidth);
  $(".sliderBlack").slider({
    range: "min",
    value: 0,
    min: inputMinBlack,
    max: inputMaxBlack,
    slide: black
  });

  function black(event, slider) {
    $(".black").val(slider.value);
  }

---

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