Getting Started
Installing Wheel Color Picker plugin is pretty straightforward! First, you should already have downloaded this plugin and, of course, jQuery library. If not, download them here:
Now you have them in your hands.
First, extract Wheel Color Picker archive to anywhere in your website directory. You might want to put them this way:
- jquery.wheelcolorpicker.js to be placed inside /js/
- css/* files to be placed inside /css/
- Other than those js file and css dir, you can discard them.
Second, on your html page, add these lines to the <head> section:
<link type="text/css" rel="stylesheet" href="path/to/css/wheelcolorpicker.css" />
<script type="text/javascript" src="path/to/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="path/to/js/jquery.wheelcolorpicker.js"></script>If your website has dark color scheme, you may wish to use wheelcolorpicker.dark.css file instead of wheelcolorpicker.css
Since version 2.3, you could initialize wheel color picker without having to write any javascript code.
Create an input element. Add data-wheelcolorpicker attribute to attach a color picker when user focus the input.
<input type="text" name="color" id="ColorInput" value="#ff0000" data-wheelcolorpicker />Another way to initialize color picker is by adding the following javascript code to attach a color picker to the input element (commonly in <head> section):
$(function() {
$('#ColorInput').wheelColorPicker();
});That's it!
If calling plugin function name wheelColorPicker() over and over again feels too long, you could make a shorthand name of it. Let's say we want to simply call it "wcp":
$.fn.wcp = $.fn.wheelColorPicker();
$('#ColorInput').wcp('color'); // Now you can simply use wcp()If you are targeting lower-end devices, it is possible to speed up performance by reducing quality or completely disable dynamic slider gradients.
$(function() {
$('#ColorInput').wheelColorPicker({
quality: 0.2, // Reduce gradient details to the lowest acceptable value
live: false // Disable dynamic slider gradients
});
});Have trouble selecting pure white color? Try enabling snap option.
<input type="text" data-wheelcolorpicker data-wcp-snap="true" />