A color picker coded using Raphael and
jQuery. The wheel is drawn using the Raphael js library. jQuery is used to assist with events.
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
⇓ Download or see the Github page.
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...