Press "Enter" to skip to content

A Simple and Easy to Use Vanilla JS Color Picker With Alpha Selection

Color picker is a vanilla javascript with alpha channel support that can be attached to any element. The color picker also comes with a popup mode that enables you to view the color picker in a popup.

A vanilla JavaScript coloration picker with alpha channel assist that may be hooked up to any ingredient.

How to make use of it:

Install the colour picker by way of NPM.

# NPM
$ npm install vanilla-picker --save

Import the colour picker to your mission.

// ES 6
import Picker from 'vanilla-picker';
<!-- Browser -->
<script src="dist/vanilla-picker.js"></script>

Create a component the place the colour picker should append to.

<div id="example"></div>

Create a brand new Picker occasion and append the colour picker to the DIV component.

new Picker({
    parent: document.querySelector('#example')
});

Display the colour picker in a popup window.

new Picker({
    parent: document.querySelector('#example'),
    popup: false // 'right'(default), 'left', 'top', 'bottom'
});

Enable/disable the alpha choice.

new Picker({
    parent: document.querySelector('#example'),
    alpha: false // default: true
});

Set the preliminary coloration.

new Picker({
    parent: document.querySelector('#example'),
    color: '#222'
});

Decide whether or not to point out a textual content area for coloration value modifying.

new Picker({
    parent: document.querySelector('#example'),
    editor: true
});

Set the format of the colour picker.

new Picker({
    parent: document.querySelector('#example'),
    layout: 'default'
});

Determine whether or not to show a textual content area for coloration values.

new Picker({
    parent: document.querySelector('#example'),
    editor: true
});

Define the colour format.

new Picker({
    parent: document.querySelector('#example'),
    editorFormat: 'hex' // or 'rgb', 'hsl'
});

Determine whether or not to show a detailed button within the popup.

new Picker({
    parent: document.querySelector('#example'),
    cancelButton: false
});

Set the default coloration on init.

new Picker({
    parent: document.querySelector('#example'),
    defaultColor: '#0cf'
});

Available callback features that can be utilized to use selector coloration to any component.

new Picker({
    onChange: function(color){},
    onDone:: function(color){},
    onOpen:: function(color){},
    onClose:: function(color){}
});

API strategies.

// updates the options
instance.setOptions(options);

// opens the popup
instance.openHandler();

// closes the popup
instance.closeHandler();

// moves the popup
instance.movePopup(options, open);

// sets the color
instance.setColor(color, silent);

// shows the picker
instance.show();

// hides the picker
instance.hide();

// destroy the picker
instance.destroy();

Vanilla JS Color Picker With Alpha Channel, vanilla-picker Plugin/Github


See Demo And Download

Official Website(Sphinxxxx): Click Here

This superior jQuery/javascript plugin is developed by Sphinxxxx. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *