JavaScript color picker

The jSuites.color is a lightweight JavaScript color picker plugin. It can be used as a vanilla plugin or a webcomponent and can be integrated with React, Angular, Vue, or any other JS library. The color picker allows users to choose a color in a responsive color grid and perform actions using the available events such as onchange. The available colors can be easily customized. This plugin brings a great user experience across different devices, independent of the screen site.

The javascript color plugin is responsive and can use different applications and devices.


Basic color picker input

Create a input color picker as a webcomponent



Source code

<html>
<script src="https://jsuites.net/v3/jsuites.js"></script>
<script src="https://jsuites.net/v3/jsuites.webcomponents.js"></script>

<link rel="stylesheet" href="https://jsuites.net/v3/jsuites.css" type="text/css" />

<jsuites-color value="#009688"></jsuites-color>

</script>
document.querySelector('jsuites-color').addEventListener('onchange', function(a,b,c) {
    // Set the font color
    e.target.children[0].style.color = this.value;
    // Show on console
    console.log('New value:' + this.value);
});
</script>
</html>


Documentation

Methods

Method Description
color.open();Open the color picker
color.close(boolean);Close the color picker
@param int ignoreEvents - Do no execute onclose event
color.getValue();Get the current value of the color picker
color.setValue(string);Set a new value to the color picker
@param hex newColor - Set a new value


Events

Method Description
onchangeMethod executed when a value is changed.
(HTMLElement element, String color) => void
oncloseMethod executed when the color picker is closed.
(HTMLElement element) => void
onopenMethod executed when the color picker is opened.
(HTMLElement element) => void


Initialization settings

Property Description
fullscreen: booleanOpen the color picker in fullscreen mode. Default: false
value: stringInitial value of the compontent
palette: Array of colorsCustom colors
placeholder: stringThe default instruction text on the element
closeOnChange: booleanAutomatically close the color picker container when on color is selected
doneLabel: stringDone button label
resetLabel: stringReset button label


Examples