How to add a color control with alpha/opacity to the WordPress theme customizer

alpha_control.php

<?php

// See full blog post here
// http://pluto.kiwi.nz/2014/07/how-to-add-a-color-control-with-alphaopacity-to-the-wordpress-theme-customizer/

function pluto_add_customizer_custom_controls( $wp_customize ) {

    class Pluto_Customize_Alpha_Color_Control extends WP_Customize_Control {
    
        public $type = 'alphacolor';
        //public $palette = '#3FADD7,#555555,#666666, #F5f5f5,#333333,#404040,#2B4267';
        public $palette = true;
        public $default = '#3FADD7';
    
        protected function render() {
            $id = 'customize-control-' . str_replace( '[', '-', str_replace( ']', '', $this->id ) );
            $class = 'customize-control customize-control-' . $this->type; ?>
            <li id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $class ); ?>">
                <?php $this->render_content(); ?>
            </li>
        <?php }
    
        public function render_content() { ?>
            <label>
                <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
                <input type="text" data-palette="<?php echo $this->palette; ?>" data-default-color="<?php echo $this->default; ?>" value="<?php echo intval( $this->value() ); ?>" class="pluto-color-control" <?php $this->link(); ?>  />
            </label>
        <?php }
    }

}
add_action( 'customize_register', 'pluto_add_customizer_custom_controls' );

customizer-admin.js

jQuery(document).ready(function($) {

Color.prototype.toString = function(remove_alpha) {
	if (remove_alpha == 'no-alpha') {
		return this.toCSS('rgba', '1').replace(/\s+/g, '');
	}
	if (this._alpha < 1) {
		return this.toCSS('rgba', this._alpha).replace(/\s+/g, '');
	}
	var hex = parseInt(this._color, 10).toString(16);
	if (this.error) return '';
	if (hex.length < 6) {
		for (var i = 6 - hex.length - 1; i >= 0; i--) {
			hex = '0' + hex;
		}
	}
	return '#' + hex;
};

  $('.pluto-color-control').each(function() {
	var $control = $(this),
		value = $control.val().replace(/\s+/g, '');
	// Manage Palettes
	var palette_input = $control.attr('data-palette');
	if (palette_input == 'false' || palette_input == false) {
		var palette = false;
	} else if (palette_input == 'true' || palette_input == true) {
		var palette = true;
	} else {
		var palette = $control.attr('data-palette').split(",");
	}
	$control.wpColorPicker({ // change some things with the color picker
		 clear: function(event, ui) {
		// TODO reset Alpha Slider to 100
		 },
		change: function(event, ui) {
			// send ajax request to wp.customizer to enable Save & Publish button
			var _new_value = $control.val();
			var key = $control.attr('data-customize-setting-link');
			wp.customize(key, function(obj) {
				obj.set(_new_value);
			});
			// change the background color of our transparency container whenever a color is updated
			var $transparency = $control.parents('.wp-picker-container:first').find('.transparency');
			// we only want to show the color at 100% alpha
			$transparency.css('backgroundColor', ui.color.toString('no-alpha'));
		},
		palettes: palette // remove the color palettes
	});
	$('<div class="pluto-alpha-container"><div class="slider-alpha"></div><div class="transparency"></div></div>').appendTo($control.parents('.wp-picker-container'));
	var $alpha_slider = $control.parents('.wp-picker-container:first').find('.slider-alpha');
	// if in format RGBA - grab A channel value
	if (value.match(/rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/)) {
		var alpha_val = parseFloat(value.match(/rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/)[1]) * 100;
		var alpha_val = parseInt(alpha_val);
	} else {
		var alpha_val = 100;
	}
	$alpha_slider.slider({
		slide: function(event, ui) {
			$(this).find('.ui-slider-handle').text(ui.value); // show value on slider handle
			// send ajax request to wp.customizer to enable Save & Publish button
			var _new_value = $control.val();
			var key = $control.attr('data-customize-setting-link');
			wp.customize(key, function(obj) {
				obj.set(_new_value);
			});
		},
		create: function(event, ui) {
			var v = $(this).slider('value');
			$(this).find('.ui-slider-handle').text(v);
		},
		value: alpha_val,
		range: "max",
		step: 1,
		min: 1,
		max: 100
	}); // slider
	$alpha_slider.slider().on('slidechange', function(event, ui) {
		var new_alpha_val = parseFloat(ui.value),
			iris = $control.data('a8cIris'),
			color_picker = $control.data('wpWpColorPicker');
		iris._color._alpha = new_alpha_val / 100.0;
		$control.val(iris._color.toString());
		color_picker.toggler.css({
			backgroundColor: $control.val()
		});
		// fix relationship between alpha slider and the 'side slider not updating.
		var get_val = $control.val();
		$($control).wpColorPicker('color', get_val);
	});
}); // each

});

customizer-controls.css

.pluto-alpha-container .transparency {
    height:24px;
    width:100%;
    background-color:#FFF;
    background-image:url(../../images/transparency-grid.png);
    box-shadow:0 0 5px rgba(0,0,0,0.4) inset;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    padding:0;
}

.pluto-alpha-container .ui-slider-handle {
    color:#777;
    background-color:#FFF;
    text-shadow:0 1px 0 #FFF;
    text-decoration:none;
    position:absolute;
    z-index:2;
    box-shadow:0 1px 2px rgba(0,0,0,0.2);
    border:1px solid #aaa;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    opacity:0.9;
    margin-top:-2px;
    height:20px;
    cursor:ew-resize;
    font-size:12px;
    padding:3px;
}

.pluto-alpha-container .ui-slider {
    position:relative;
    text-align:center;
    width:88%;
}

.wp-picker-container a.wp-picker-open ~ div.pluto-alpha-container {
    display:block;
}

.pluto-alpha-container {
    box-sizing:padding-box;
    display:none;
    border:1px solid #dfdfdf;
    border-top:none;
    background:#FFF;
    padding:0 11px 6px;
}

.customize-control-alphacolor .wp-picker-container .iris-picker {
    border-bottom:none;
}

functions.php

<?php

function pluto_register_customizer_options( $wp_customize ) {

/*-----------------------------------------------------------*
 * Defining our own section called "It's Alpha time"
 *-----------------------------------------------------------*/
$wp_customize->add_section(
    'alpha_color_category',
    array(
        'title'     => 'It\'s Alpha time',
        'priority'  => 202
    )
);

/*-----------------------------------------------------------*
 * Hook our control into the section above
 *-----------------------------------------------------------*/
$wp_customize->add_setting(
    'pluto_color_control_one'
);

$wp_customize->add_control(
    new Pluto_Customize_Alpha_Color_Control(
        $wp_customize,
        'pluto_color_control_one',
        array(
            'label'    => 'Alpha Color',
            'palette' => true,
            'section'  => 'alpha_color_category'
        )
    )
);

}

add_action( 'customize_register', 'pluto_register_customizer_options' );

load_scripts.php

<?php

function pluto_enqueue_customizer_admin_scripts() {

  wp_register_script( 'customizer-admin-js', get_template_directory_uri() . '/js/admin/customizer-admin.js', array( 'jquery' ), NULL, true );
  wp_enqueue_script( 'customizer-admin-js' );

  }

add_action( 'admin_enqueue_scripts', 'pluto_enqueue_customizer_admin_scripts' );

load_styles.php

<?php

function pluto_enqueue_customizer_controls_styles() {

  wp_register_style( 'pluto-customizer-controls', get_template_directory_uri() . '/stylesheets/admin/customizer-controls.css', NULL, NULL, 'all' );
  wp_enqueue_style( 'pluto-customizer-controls' );

  }

add_action( 'customize_controls_print_styles', 'pluto_enqueue_customizer_controls_styles' );