Draggable-number.js

Display number as simple text but allow click + drag to change the value. If the number is simply clicked then it displays an input so that a precise value can be entered.

Getting Started:

With Bower: $ bower install --save draggable-number.js

Or manually download the latest release.

Usage:

Include the draggable-number.min.js file and then call new DraggableNumber(element).

<input class="numeric-input" value="42" />
<script src="dist/draggable-number.min.js"></script>
<script>
  new DraggableNumber(document.getElementsByClassName('numeric-input')[0]);
</script>

Options:

You can set the draggableNumber options when creating a new instance,

new DraggableNumber(element, {
  min: 0,
  max: 100,
  dragThreshold: 5
});

API:

item.get()

Return the current value as float.

var value = item.get();

item.set(value)

Set the value of the element. This update the input and span value.

item.set(42);

item.setMin(value)

Set the minimum value.

item.setMin(5);

item.setMax(value)

Set the maximum value.

item.setMax(5);

item.destroy()

Remove the DraggableNumber element, leaving the original input field.

item.destroy();