Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jsantell/dial
A UI dial component
https://github.com/jsantell/dial
Last synced: 3 months ago
JSON representation
A UI dial component
- Host: GitHub
- URL: https://github.com/jsantell/dial
- Owner: jsantell
- License: mit
- Created: 2013-01-25T20:17:08.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2013-07-07T21:45:27.000Z (over 11 years ago)
- Last Synced: 2024-04-09T21:20:04.254Z (10 months ago)
- Language: JavaScript
- Homepage: http://jsantell.github.com/dial/
- Size: 216 KB
- Stars: 9
- Watchers: 4
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
dial
====
A UI dial component for use with [component](https://github.com/component/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](https://jsantell.github.com/button)
[View Example](http://jsantell.github.com/dial)
## Installation
```
component install jsantell/dial
```
## API
### new Dial(input, [options])
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.
```js
var Dial = require('dial');
var input = document.getElementById('inputEl');
var dial = new Dial(input, {
min: -25,
max: 25
});
```
### Dial#set(val)
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.
### Dial#render()
Reconstructs the dial's `el` property containing the dial element. Already called during instantiation.
### Dial#bind()
Binds events necessary for the dial -- also binds mouseup and mousemove to `document` if this is the first dial. Already called during instantiation.
### Dial#unbind()
Unbinds the events related to the dial.
### Dial#hideInput()
Hides the corresponding input field. Already called on instantiation.
### Dial#showInput()
Displays the corresponding input field. Called on destroy, or call it manually to display the element.
### Dial#destroy()
Destroys the dials element, reveals original input element and unbinds dial events
## Events
Dial inherits from [Emitter](https://github.com/component/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:
```js
var dial = new Dial(input);
dial.on('change', function (val) {
console.log('Dial value is now: ' + val);
});
```
## Options
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:
```js
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:
```
```
Or just falling back to defaults which are:
```js
min : 0
max : 10
value : 5
float : false
increment : // 1/25th of the range between min and max
```