Touch-Friendly jQuery Color Picker Sliders For Bootstrap 3

File Size: 85.8 KB
Views Total: 3914
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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=""></script>
<script src="bootstrap-colorpickersliders/bootstrap.colorpickersliders.js"></script>

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

<link rel="stylesheet" href="">
<script src=""></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.

size: 'sm',
placement: 'right',
swatches: false,
order: {
hsl: 1

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.