The mod.color_picker() method automatically attaches event listeners for all <div class="mod-color-picker"></div> elements on the page and handles interactivity for each element. The color picker supports full RGBA color selection with hue, saturation, brightness, and alpha controls, plus eye dropper functionality (where supported by the browser).
For handling events, DOM event listeners should be attached to the change event of the .mod-hex-input class. When this changes, if need be, you can pull the value of the RGBA inputs in your event listener. The color picker also supports setting default colors via the data-default-color attribute or through the options parameter.
Method API
// Using mod(-plus).iife.min.js
window.mod.color_picker(options?: object);
// Using mod(-plus).esm.min.js
import { color_picker } from 'path/to/mod(-plus).esm.min.js';
color_picker(options?: object);Usage Examples
Use the following usage examples to guide your implementation.
Examples Use Global JavaScript
For simplicity, all usage examples demonstrate usage with Mod's global JavaScript library (mod(-plus).iife.min.js). All documented behavior is identical in the ESM variant of Mod's JavaScript library.
Color Picker HTML
<div class="mod-color-picker" data-default-color="#ff6b35">
<div class="mod-color-overlay"></div>
<div class="mod-color-picker-controls">
<div class="mod-gradient-canvas-wrapper">
<canvas class="mod-gradient-canvas"></canvas>
<div class="mod-gradient-selector"></div>
</div>
<div class="mod-hue-slider">
<div class="mod-hue-selector"></div>
</div>
<div class="mod-alpha-slider">
<div class="mod-alpha-gradient"></div>
<div class="mod-alpha-selector"></div>
</div>
</div>
<div class="mod-color-inputs">
<div class="mod-hex-wrapper">
<input type="text" class="mod-hex-input" placeholder="#000000" />
<button class="mod-eye-dropper-button">
<i class="mod-icon-eye-dropper"></i>
</button>
</div>
<div class="mod-rgba-inputs">
<input type="number" class="mod-red-value" min="0" max="255" />
<input type="number" class="mod-green-value" min="0" max="255" />
<input type="number" class="mod-blue-value" min="0" max="255" />
<input type="number" class="mod-alpha-value" min="0" max="100" />
</div>
</div>
</div>Color Picker JavaScript
// Basic usage - processes all color pickers on the page
window.mod.color_picker();
// With default color option
window.mod.color_picker({
default_color: '#3498db'
});
// Handle color changes
document.querySelector('.mod-hex-input').addEventListener('change', (event) => {
const hex_value = event.target.value;
const color_picker = event.target.closest('.mod-color-picker');
const red_value = color_picker.querySelector('.mod-red-value').value;
const green_value = color_picker.querySelector('.mod-green-value').value;
const blue_value = color_picker.querySelector('.mod-blue-value').value;
const alpha_value = color_picker.querySelector('.mod-alpha-value').value;
console.log('Color changed:', {
hex: hex_value,
rgba: `rgba(${red_value}, ${green_value}, ${blue_value}, ${alpha_value / 100})`
});
});