Change Input Value By Dragging – numscrubber.js

numscrubber.js is a very small (2kb) JavaScript library for creating an user-friendly number input that allows to increase/decrease the value by dragging on X-axis and up/down arrow keys.

How to use it:

Insert the main JavaScript file numscrubber.js into the webpage.

<script src="src/numscrubber.js"></script>

Initialize the library and we’re ready to go.

Numscrubber.init();

Add the ‘data-numscrubber’ attribute to your number input as this:

<input type="number" data-numscrubber value="10">

It also supports native attributes of number input:

<input data-numscrubber type="number" value="10" min="-50" max="140" step="10">