jQuery and Bootstrap color picker sliders

A nice, responsive and touch-friendly, Bootstrap color picker sliders based on jQuery.

Bootstrap color picker sliders as easy to use plugin

The solution allows to implement, in a very easy way, a various kind color picker sliders. RGB Color and opacity Picker, HSL, HSV, and more.

The solution 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.

Create a responsive color selector with HSV, HSL, RGB and CIE-Lch (which supports human perceived lightness) selectors and color swatches. Full featured popover (HSV panel, HSL and RGB sliders, color swatches).

And this is not the end of the possibilities.

Demo: jQuery and Bootstrap color picker sliders
Demo: jQuery and Bootstrap color picker sliders

A simple example – HSV flat:

<div id="hsvflat"></div>
<script>
    $("#hsvflat").ColorPickerSliders({
        color: "rgb(36, 170, 242)",
        flat: true,
        sliders: false,
        swatches: false,
        hsvpanel: true
    });
</script>

Example 2 – HSL and CIE Lch sliders with customizable color swatches (flat rendering):

<div id="hslflat"></div>
<script>
    $("#hslflat").ColorPickerSliders({
        color: "rgb(36, 170, 242)",
        flat: true,
        order: {
            hsl: 1,
            cie: 2,
            preview: 3
        }
    });
</script>

License: Apache License, Version 2.0

Project website with docs:

http://www.virtuosoft.eu/code/bootstrap-colorpickersliders

Get Bootstrap color picker sliders plugin from GitHub:

https://github.com/istvan-ujjmeszaros/bootstrap-colorpickersliders

You may also like:

jQuery product colorizer plugin

Enjoy!

Share:Share on Facebook2Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1