Vanilla JS Color Picker With Alpha Channel – vanilla-picker

Category: Color , Javascript | June 19, 2018
Author: Sphinxxxx
Views Total: 21
Official Page: Go to website
Last Update: June 19, 2018
License: MIT

Preview:

Vanilla JS Color Picker With Alpha Channel – vanilla-picker

Description:

A vanilla JavaScript color picker with alpha channel support that can be attached to any element.

The color picker also comes with a popup mode that enables you to display the color picker in a popup window.

How to use it:

Install the color picker via NPM.

# NPM
$ npm install vanilla-picker --save

Import the color picker to your project.

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

Create an element where the color picker should append to.

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

Create a new Picker instance and append the color picker to the DIV element.

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

Display the color picker in a popup window.

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

Enable/disable the alpha selection.

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

Set the initial color.

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

Decide whether to show a text field for color value editing.

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

Available callback functions which can be used to apply selector color to any element.

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

Leave a Reply