bower install colorwheel
The wheel size is set on creation. It supports a small set of callbacks and touch events.
It was created for the UI at Fame Driver and distributed with a MIT license.
Hope you enjoy it – John Weir
Source available on Github.
Run simple test suite.
* Requires jQuery and Raphael version 2.1.0 or greater.
Usage and methods
var cw = Raphael.colorwheel(dom_element, height_width [, segments]);
The wheel is drawn into a square, so only one dimension is required. segments is an option to increase, or decrease, the smoothness of the hue ring. 60 is the default.
cw.input(dom_element) ⇒ cw
Binds a text input for setting and receiving the color as a hex value. This will allow the user to input a hex value and update the wheel.
cw.onchange(callback) ⇒ cw
Set a callback for any change received. Callback takes one argument, a Raphael RGB color object.
cw.ondrag(start, stop) ⇒ cw
Set a start and stop callback for dragging. The callbacks take one argument, a Raphael RGB color object.
cw.color() ⇒ Raphael color object
Get the current color as RGB object
cw.color(hex_value) ⇒ cw
Set the current color via a hex value
Assigning an input to a colorwheel will allow the user to directly change the hex color value.
When the input is set the colorwheel will set its color to the input's value
Simple example using the callback to update an element's text and css.
The wheel can be scaled to suit your needs. The large ring has larger number of segments, to make it smoother.
A more advanced callback
When the color is changed a callback is used to change the colors of each letter below.
These letters will get cycled through... and through...