jQuery Bootstrap Color Picker Sliders Examples

Different sizes and color sliders

<input type="text" class="form-control" id="small" value="#adff2f">
<input type="text" class="form-control" id="default" value="#7f7f7f">
<input type="text" class="form-control" id="large" value="rgb(251, 167, 219)">
<input type="text" class="form-control" id="swatchesonly">
<input type="text" class="form-control" id="hslswatches" value="hsl(180, 50%, 50%)">
<script>
    $("input#small").ColorPickerSliders({
        size: 'sm',
        placement: 'right',
        swatches: false,
        order: {
            hsl: 1
        }
    });
    $("input#default").ColorPickerSliders({
        placement: 'right',
        swatches: false,
        order: {
            rgb: 1
        }
    });
    $("input#large").ColorPickerSliders({
        size: 'lg',
        placement: 'right',
        swatches: false,
        order: {
            cie: 1
        }
    });
    $("input#swatchesonly").ColorPickerSliders({
        placement: 'right',
        color: 'red',
        swatches: ['red', 'green', 'blue'],
        customswatches: false,
        order: {}
    });
    $("input#hslswatches").ColorPickerSliders({
        placement: 'right',
        order: {
            hsl: 1,
            opacity: 2
        }
    });
</script>

Using the `onchange()` event

<button class="btn btn-default" id="bgcolor">Change body bg color</button>
<script>
        $("#bgcolor").ColorPickerSliders({
            color: 'white',
            previewontriggerelement: false,
            title: 'Body background color',
            order: {
                rgb: 1,
                preview: 2
            },
            onchange: function(container, color) {
                var body = $('body');

                body.css("background-color", color.tiny.toRgbString());

                if (color.cielch.l < 60) {
                    body.css("color", "white");
                }
                else {
                    body.css("color", "black");
                }
            }
        });
</script>

Full featured flat rendering

<div id="flat"></div>
<script>
    $("#flat").ColorPickerSliders({
        flat: true,
        invalidcolorsopacity: 0
    });
</script>

invalidcolorsopacity hiddens the colors from the CIE sliders whose can not be converted to RGB without lowering their chroma values. It is good for creating color schemas.

Settings

Option	Description
`color`	This is the initial color if there is no valid (any CSS formatted) color value on the connected input element. Can be in any format that Tiny Color supports.
`size`	`'sm'`: Small sized popover. `'default'`: Default popover size. `'large'`: Large popover.
`animation`	`true`: Animated popover. `false`: No popover animation.
`placement`	Popover placement direction. Can be `'auto'` \| `'top'` \| `'left'` \| `'bottom'` \| `'right'`. When `'auto'` is specified, it will dynamically reorient the popover. For example, if placement is `'auto left'`, the tooltip will display to the left when possible, otherwise it will display right.
`title`	`''`: Popover title.
`trigger`	`'focus'`: The popover will be visible on focus or on click. `'manual'`: No auto trigger of popover on focus/click. Must trigger `colorpickersliders.show` and `colorpickersliders.hide` events to show/hide the popover.
`flat`	`false`: The color picker is rendered in a popup, which is shown on focus of the connected element. `true`: The color picker is rendered right after the connected element, and is always visible.
`previewformat`	This is the color format on the preview slider (if visible). Can be `rgb`, `hsl` or `hex`. Note that hex format can not represent the opacity value.
`swatches`	`array`: Array of CSS colors (can be CSS color names as well). `false`: The swatches are disabled.
`customswatches`	`string`: Name of the custom swatches group. Color pickers with the same `customswatches` name share the same swatch colors, so if you add a new color to one of the color pickers, then all the color pickers swatches will be updated on the page which has the same `customswatches` name. `false`: The custom swatches are disabled, so only the predefined swatches can be used.
`connectedinput`	`selector or jQuery object`: The connected input elements value will be automatically updated in sync with the color picker. The color format which the color is represented i the input can be set via the `data-color-format` property. It can be any of `hex`, `hsl` or `rgb`. If it is hex, then the opacity will be discarded.
`updateinterval`	Update interval of the sliders while dragging (ms). The default is 30.
`previewontriggerelement`	`true`: Preview of the color on the connected element's background. `false`: No preview on the connected element.
`previewcontrasttreshold`	`30`: If `previewontriggerelement` is enabled, then if the lightness is below of this value, the element's text color will be white. Otherwise the text is black.
`erroneousciecolormarkers`	`true`: Unconvertable CIE colors are marked with an exclamation mark on the CIE sliders level marker. `false`: No exclamation mark on the markers.
`invalidcolorsopacity`	`1`: Opacity of the invalid (unconvertable) area of the CIE sliders.
`finercierangeedges`	`true`: Sharper, more accurate edges of the valid CIE ranges on the sliders. `false`: Smoother edges of the valid CIE ranges on the sliders.
`order`	An object which defines which sliders appear and in which order. Possible properties: `opacity`, `hsl`, `rgb`, `cie`, `preview`.
`labels`	An object which defines the labels of the sliders. Possible properties: `hslhue`, `hslsaturation`, `hsllightness`, `rgbred`, `rgbgreen`, `rgbblue`, `cielightness`, `ciechroma`, `ciehue`, `opacity`, `preview`.
`onchange`	`function(container, color)`: This function is triggered when the color is changed with the sliders or via a connected input. The `color` parameter holds the actual color object in the following formats: rgb object, hsl object, cie lch object, Tiny Color object.
`titleswatchesadd`	`string`: Title of the add color to swatches button.
`titleswatchesreset`	`string`: Title of the reset swatches button.

Events

Example usage: $("#colorpicker").trigger("colorpickersliders.updateColor", "red"));

The following events can be triggered on the element which the color picker is initialized on.