Vanilla JS Color Picker With Alpha Channel – vanilla-picker

Category: Color , Javascript | January 12, 2019
Author: Sphinxxxx
Views Total: 1,788
Official Page: Go to website
Last Update: January 12, 2019
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){},
    onDone:: function(color){},
    onDone:: function(color){}
});

Changelog:

v2.7.1 (01/12/2018)

  • CSS vendor prefixes with Autoprefixer.

v2.7.0 (11/18/2018)

  • Fixed options.editorFormat

v2.6.0 (10/06/2018)

  • Make an ES6 module that actually works.

v2.5.2 (09/15/2018)

  • Bugfixed.
  • Keyboard navigation and basic accessibility.

v2.4.2 (09/08/2018)

  • movePopup(): Share a picker among multiple parents.
  • silent flag in setColor()

08/18/2018

  • Added onOpen/onClose callbacks.

You Might Be Interested In:

Leave a Reply