deepeshkumar322 / jquery-wheelcolorpicker

A jQuery plugin to add color picker functionality to HTML form inputs in round color wheel style.

jQuery Wheel Color Picker Plugin

The Wheel Color Picker plugin adds color picker functionality to HTML form inputs in round color wheel style. The Wheel Color Picker can be displayed as a popup dialog as users focus the input, or embedded inline. It currently supports these HTML elements:

• input (works on buttons too!)
• textarea

Note: It should also works on other HTML elements which support jQuery .val() function.

Features

SUPPORTED COLORS

This plugin supports both RGB and HSV modes with additional Alpha channel.

MULTIPLE FORMAT

There are numbers of formats which the color picker can display its value:

• hex format, e.g. ffffff
• CSS-style hex format, e.g. #ffffff
• rgb format, e.g. rgb(255, 255, 255)
• hsv format, e.g. hsv(1.0, 1.0, 1.0)

INDIVIDUAL SLIDERS

The color picker can be set to display slider for each individual color channel.

THEMING CAPABILITY

The color picker appearance can be customized using CSS. This package already contains two CSS variants which can be used as starting point to make your own theme.

See Features Page for the complete list.

Usage

First, include these javascript and CSS files on the HTML head section:

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.wheelcolorpicker.js"></script>
<link type="text/css" rel="stylesheet" href="css/wheelcolorpicker.css" />

HTML WAY

Since version 2.3, an easier way to initialize the color picker is by simply adding data-wheelcolorpicker attribute to an input element.

<input type="text" data-wheelcolorpicker />

And you're done!

JAVASCRIPT WAY

Or you can also initialize the color picker to an element by calling:

$(element).wheelColorPicker( options );

Example

<input type="text" class="colorpicker" />

<script type="text/javascript">
  $(function() { $('.colorpicker').wheelColorPicker(); });
</script>

Demo

See example.html for more usage examples or try it online at our demonstration page.

Documentation

See Documentation Page for a complete documentation.

License

jQuery Wheel Color Picker plugin is released under MIT License.

What's New in 2.5

• Added slider snap option.
• Added support for Firefox 3.6.

Backward Compatibility

Version 1.x

Options and methods marked as deprecated in version 2.x are still available which makes this backward compatible to 1.x. However, please refrain on using any deprecated options and methods since they are planned to be removed in future release. CSS is not backward compatible. Switching back to base theme is recommended. For more information, see Migration page.

---