vanilla-picker-mini
A simple, easy to use color picker with alpha selection.
This is a smaller version of vanilla-picker 2.5.0, made for submission to the MicroJS.com catalog.
The only difference from the full version is the lack of support for color names. This means you need to set the picker's color values in hex
/rgba
/hsla
notation, and not "red", "yellowgreen" or "mediumaquamarine".
Demo
https://codepen.io/Sphinxxxx/pen/xazoQN
Getting Started
Installing
Download vanilla-picker-mini.js
from the /dist
folder, or use a CDN:
<script src="https://unpkg.com/vanilla-picker-mini@1"></script>
Usage
<div id="parent">Click me</div>
<script>
var parent = document.querySelector('#parent');
var picker = new Picker(parent);
picker.onChange = function(color) {
parent.style.background = color.rgbaString();
};
</script>
Options
var picker = new Picker({
parent:
popup: 'right'
'left'
'top'
'bottom'
false
template:
layout: 'default'
alpha: true
editor: true
color:
onChange:
onDone:
onOpen:
onClose:
});
Accessibility
The color picker is built to support basic keyboard navigation and use with screen readers.
I would be very interested in feedback on improvements that could be done here!
Credits
License
The ISC license - see the LICENSE.md file for details.