Change The Value Of Your Number Input With Mouse Drag - stepper.js

stepper.js is a lightweight jQuery plugin for generating a numeric stepper form input where the users are able to change its value by mouse drag and mouse wheel. It also generates a slim progress bar at the bottom of the number input presenting the min/max/current values.

See also:

• jQuery Plugin To Increase & Decrease Input Values Via Mouse Drag - inputDrag
• Draggable Input / Number Spinner With jQuery And jQuery UI - Scrubber

How to use it:

1. Create a regular text input field for the input stepper.

<div class="stepper" id="demo">
  <div class="stepper-progress"></div>
  <input type="text" class="stepper-number">
</div>

2. Put jQuery JavaScript library and the stepper.js script in your html page when needed.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.stepper.js"></script>

3. The default CSS styles for the input stepper. Add the following CSS snippets in your existing CSS file.

.stepper {
  position: relative;
  width: 100%;
  height: 30px;
  background: #4e4e4e;
  border: 1px solid #292929;
  cursor: col-resize;
}

.stepper .stepper-number:focus { outline: 1px solid #1baee1;  //cursor: text
}

.stepper-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transition: background-color 0.1s linear;
  transition: background-color 0.1s linear;
}

.stepper-number {
  position: relative;
  width: 100%;
  height: 28px;
  line-height: 28px;
  padding: 0 6px;
  color: #fff;
  background: transparent;
  border: 0;
  outline: 0;
  outline-offset: 0;
  cursor: col-resize;
  z-index: 2;
}

.stepper.is-changing .stepper-progress { background-color: #1baee1; }

.stepper.is-scrubbing { background: rgba(255, 255, 255, 0.8) }

4. Initialize the plugin with default options and we're done.

$('#demo').stepper();

5. You're allowed to set the min/max value via JavaScript or using the native min/max attribute directly on the input field.

<input type="text" class="stepper-number" min="10" max="90">

$('#demo').stepper({
  min: -200,
  max: 200,
});

6. All default customization options.

$('#demo').stepper({
  selectorProgressBar: '.stepper-progress',
  selectorInputNumber: '.stepper-number',
  classNameChanging: 'is-changing',
  value: "",
  decimals: 0,
  unit: '%',
  min: 0,
  max: 100,
  step: 1
});

Change log:

2017-07-09

• add mousewheel event + text input parameters

---

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