Bootstrap Color Picker Sliders

Download   Demo

Bootstrap Color Picker Sliders is a Bootstrap 3 optimized advanced responsive color selector with color swatches and support for human perceived lightness. Works in all modern browsers and on touch devices. Bootstrap 3 optimized responsive color selector with HSV, HSL, RGB and CIE-Lch selectors and color swatches.

1. INCLUDE CSS AND JS FILES

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all">
<link href="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" rel="stylesheet" type="text/css" media="all">
<link href="src/bootstrap.colorpickersliders.css" rel="stylesheet" type="text/css" media="all">

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tinycolor/0.11.1/tinycolor.min.js"></script>
<script src="src/bootstrap.colorpickersliders.js"></script>

2. HTML

<div id="hsvflat"></div>

3. JAVASCRIPT

 $("#hsvflat").ColorPickerSliders(
 color: "rgb(36, 170, 242)",
 flat: true,
 sliders: false,
 swatches: false,
 hsvpanel: true
);

Bootstrap Color Picker Sliders