Touch-Friendly jQuery Color Picker Sliders For Bootstrap 3

A colorpicker plugin for jQuery and Bootstrap 3 that allows you to select a color from color picker sliders based on jQuery Color Picker Sliders.

Features:

• Responsive and touch-enabled.
• Color swatches and human perceived lightness supported.
• Lots of options to customize the color picker sliders.
• Callbacks supported.

Basic Usage:

1. Include jQuery library and jQuery Bootstrap Color Picker Sliders plugin on the page.

<link href="bootstrap-colorpickersliders/bootstrap.colorpickersliders.css" rel="stylesheet" type="text/css" media="all">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="bootstrap-colorpickersliders/bootstrap.colorpickersliders.js"></script>

2. Include Twitter's Bootstrap 3 framework on the page.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

3. Include required tinycolor.js script for color parsing.

<script src="libraries/tinycolor.js"></script>

4. Create a text input filed for the color picker.

<input type="text" class="form-control" id="demo" value="#003366">

5. Initialize the plugin on the input field.

<script>
$("input#demo").ColorPickerSliders({
size: 'sm',
placement: 'right',
swatches: false,
order: {
hsl: 1
}
});
</script>

6. Configurations.

color: 'hsl(342, 52%, 70%)',
size: 'default', // sm | default | lg
animation: true,
placement: 'auto',
trigger: 'focus', // focus | manual
title: '',
swatches: ['FFFFFF', 'C0C0C0', '808080', '000000', 'FF0000', '800000', 'FFFF00', '808000', '00FF00', '008000', '00FFFF', '008080', '0000FF', '000080', 'FF00FF', '800080'], // array or false to disable swatches
customswatches: 'colorpickkersliders', // false or a grop name
connectedinput: false, // can be a jquery object or a selector
flat: false,
updateinterval: 30, // update interval of the sliders while in drag (ms)
previewontriggerelement: true,
previewcontrasttreshold: 15,
previewformat: 'rgb', // rgb | hsl | hex
erroneousciecolormarkers: true,
invalidcolorsopacity: 1, // everything below 1 causes slightly slower responses
finercierangeedges: true, // can be disabled for faster responses
titleswatchesadd: "Add color to swatches",
titleswatchesremove: "Remove color from swatches",
titleswatchesreset: "Reset to default swatches",
order: {},
labels: {},
onchange: function() {
}

Change log:

v3.0.1 (2014-08-12)

• Added rgba fallback for hex with opacity

v3.0.0 (2014-08-11)

• Added HSV panel

v2.1.7 (2014-02-13)

• Fixed gradient rendering issues

v2.1.6 (2014-02-11)

• Fixed rendering in Firefox

v2.1.5 (2014-02-11)

• Fixed triggerelement color update with flat rendering

v2.1.4 (2014-02-10)

• Fixed: settings.previewformat doesn't work

v2.1.3 (2014-02-07)

• Fixed: Need a way to get the current color object

v2.1.2 (2014-01-31)

• New setting to prevent touch keyboards to show up on focus.

v2.0.0 (2014-01-29)

• Added SVG fallback (supports IE9, IE Mobile)

v1.1.3 (2014-01-28)

• fixed: updateColot doesn't update sliders when in flat mode

v1.1.2 (2014-01-20)

• Js error with updateColor

v1.1.1 (2014-01-05)

• Js error with updateColor

v1.1.0 (2013-12-30)

• added a new version of the color picker without CIE Lch support

---

This awesome jQuery plugin is developed by istvan-ujjmeszaros. For more Advanced Usages, please check the demo page or visit the official website.