Slider Control

sliderControl.php

<?php

namespace Kirki\Controls;

/**
 * Class SliderControl
 * @package Kirki\Controls
 * @modified Enrico Ripalti: added "units" value, if defined inside "choices" array of control, to make the slider work
 * work with css property in postMessage transport mode. See variables $cmValue and $cmUnits
 */
class SliderControl extends \WP_Customize_Control {

	public $type = 'slider';

	public function enqueue() {
		wp_enqueue_script( 'jquery-ui' );
		wp_enqueue_script( 'jquery-ui-slider' );
	}

	public function render_content() {
        xdebug_break();
        // If a units is specified in choices{}, its content is added to the value
        $cmValue = isset($this->choices['units']) ? $this->value() . $this->choices['units'] : $this->value();
        $cmUnits =  isset($this->choices['units']) ? $this->choices['units'] : null;
        ?>
		<label>

			<span class="customize-control-title">
				<?php
					// The label has already been sanitized in the Fields class, no need to re-sanitize it.
				?>
				<?php echo $this->label; ?>
				<?php if ( ! empty( $this->description ) ) : ?>
					<?php
						// The description has already been sanitized in the Fields class, no need to re-sanitize it.
					?>
					<span class="description customize-control-description"><?php echo $this->description; ?></span>
				<?php endif; ?>
			</span>

			<input type="text" class="kirki-slider" id="input_<?php echo $this->id; ?>" disabled value="<?php echo $cmValue; ?>" <?php $this->link(); ?>/>

		</label>

		<div id="slider_<?php echo $this->id; ?>" class="ss-slider"></div>
		<script>
            var <?php echo str_replace("-", "_", $this->id); ?>_cmUnits = '<?php echo $cmUnits ?>';

            jQuery(document).ready(function($) {
                $( '[id="slider_<?php echo $this->id; ?>"]' ).slider({
                        value : <?php echo $this->value(); ?>,
                        cmUnits : "<?php echo $cmUnits; ?>",
                        min   : <?php echo $this->choices['min']; ?>,
                        max   : <?php echo $this->choices['max']; ?>,
                        step  : <?php echo $this->choices['step']; ?>,
                        <?php if (isset($this->choices['units'])) { ?>
                        slide : function( event, ui ) { $( '[id="input_<?php echo $this->id; ?>"]' ).val(ui.value.toString() + <?php echo str_replace("-", "_", $this->id); ?>_cmUnits).keyup(); }
                        <?php }else{ ?>
                        slide : function( event, ui ) { $( '[id="input_<?php echo $this->id; ?>"]' ).val(ui.value).keyup(); }
                        <?php } ?>
                });
                $( '[id="input_<?php echo $this->id; ?>"]' ).val( $( '[id="slider_<?php echo $this->id; ?>"]' ).slider( "value" )) + woo_options_woo_nav_font_size_cmUnits;
            });
		</script>
		<?php

	}
}