Gnob

Simple, mouse-wheelable, text-input-changeable, dependency-free knob

demo

Vanilla

<input id="range" type="range" data-gnob/>

var ranges = document.querySelectorAll('[data-gnob]');

Array.prototype.slice.call(ranges).forEach(function(range) {
  new Gnob(range);
});

document.getElementById('range').onchange = function(value) { console.log(value); }

React

<Gnob min={0} max={10} onChange={React.PropTypes.func.isRequired} />

Usage

• Scroll wheel to change value
• Double click a gnob to input value (supports up and down arrows)

Options

• (data-gnob-)max: The max value of the knob (default 0)
• (data-gnob-)min: The min value of the knob (default 10)
• (data-gnob-)initial: The initial value of the knob (default 0)
• (data-gnob-)size: The size of the knob as small, medium, or large (default medium)
• (data-gnob-)indicator: The CSS color of the indicator (default #E8E15A)

TODO

• Support stepping by any number. Currently only steps by 1.
• Angular.js directive
• Different theming options (light, dark, gray, custom css?)