Change The Value Of Your Number Input With Mouse Drag - stepper.js
File Size: | 6 KB |
---|---|
Views Total: | 3151 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.