-
Notifications
You must be signed in to change notification settings - Fork 31
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
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 />Add the following javascript code to attach a color picker to the input element (commonly in <head> section):
$(function() {
$('#ColorInput').wheelColorPicker();
});That's it!
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
});
});