A UI dial component for use with component. Bind to an input field and turn it into a sleek dial.

Tested in Chrome, Firefox, Safari, Opera, IE9+

Check out the related button component

View Example

component install jsantell/dial

Create a new dial instance, linked to inputEl. May also pass in an options object, details in options section. Upon instantiation, the dial is rendered, the input is hidden, and events are bound to the dial.

var Dial = require('dial');
var input = document.getElementById('inputEl');
var dial = new Dial(input, {
  min: -25,
  max: 25
});

If val is within the allowed range, it is set on the input field and the dial is updated accordingly. A change event is fired with the val passed in as the only argument.

Reconstructs the dial's el property containing the dial element. Already called during instantiation.

Binds events necessary for the dial -- also binds mouseup and mousemove to document if this is the first dial. Already called during instantiation.

Unbinds the events related to the dial.

Hides the corresponding input field. Already called on instantiation.

Displays the corresponding input field. Called on destroy, or call it manually to display the element.

Destroys the dials element, reveals original input element and unbinds dial events

Dial inherits from Emitter, so all emitter methods apply. By default, only a change event is fired when the dial's value changes, which can be hooked into via:

var dial = new Dial(input);
dial.on('change', function (val) {
  console.log('Dial value is now: ' + val);
});

Configuration options can be set up via the option object in the constructor, data attributes in the input element, or by default -- this is also the order in which they're checked on a property by property basis.

Using options object:

var dial = new Dial(input, {
  min: -10,
  max: 10,
  value: 0,
  float: true,
  increment: 0.5
});

Or using data attributes (and value) on an input element:

<input type="text" data-min="-10" data-max="10" float="carview.php?tsp=true" data-increment="0.5" value="0" />

Or just falling back to defaults which are:

min   : 0
max   : 10
value : 5
float : false
increment : // 1/25th of the range between min and max