How To Create CMB2 Slider Field Type

CMB2 Slider Field Type 800x249 - How To Create CMB2 Slider Field Type

In one of my previous tutorials, I have shown you How To Create CMB2 Switch Button Meta Field Type. Here in this tutorial I will show how to create a Slider field type using CMB2 Custom Metaboxes and Fields for WordPress.

Lets Create CMB2 Slider Field Type

just like my previous tutorial, Slider field is also very simple to build. As usual using CMB2’s built in field creation methods. To define the field markup, you need to hook into the ‘cmb2_render_{field-type}’ action. Based on that, our action to hook into is ‘cmb2_render_slider’.

/* CMB2 Slider Field. Add the code below in a file named slider_metafield.php ------------- */
function cmb2_render_slider( $field, $field_escaped_value, $field_object_id, $field_object_type, $field_type_object ){

 // Only enqueue scripts if field is used.
 //$this->setup_admin_scripts();
 $slider = '<div class="cmb2-slider"></div>';
 $slider .= $field_type_object->input( array(
 'type' => 'hidden',
 'class' => 'cmb2-slider-value',
 'readonly' => 'readonly',
 'data-start' => absint( $field_escaped_value ),
 'data-min' => $field->min(),
 'data-step' => $field->step(),
 'data-max' => $field->max(),
 'desc' => '',
 ) );

 $slider .= '<span class="cmb2-slider-value-display">'. $field->value_label() .' <span class="cmb2-slider-value-text"></span></span>';
 $slider .= $field_type_object->_desc( true );
 echo $slider;
}add_action( 'cmb2_render_slider', 'cmb2_render_slider', 10, 5 );

Styling The Slider Field

After defining the field we need to style the field to look like a slider.

/* CMB2 Slider Field Styling. Add the code below in a file named slider_metafield.css ------------- */
.cmb-type-slider .ui-slider-horizontal { height: 1.1em; }
.cmb-type-slider .ui-slider-horizontal.ui-widget-content { border: 1px solid #dddddd; color: #222222;
    display: inline-block; margin-right: 25px;  vertical-align: middle;  width: 98%;}
.cmb-type-slider .ui-slider-horizontal .ui-slider-handle { margin-left: 0; top: -0.445em; }
.cmb-type-slider .ui-slider-horizontal .ui-slider-handle:not([style="left: 0%;"]){ margin-left: -28px; }
.cmb-type-slider .ui-slider .ui-slider-handle {
    height: 1.8em; width: 2.2em; background: #fafafa; border: 1px solid #d9d9d9; border-radius: 3px;
    box-shadow: 0 0 1px #f0f0f0 inset, 0 1px 7px #ebebeb inset, 0 3px 6px -3px #bbb; cursor: default;
}
.cmb-type-slider .ui-slider .ui-slider-handle:after,
.cmb-type-slider .ui-slider .ui-slider-handle:before {
  content: ""; display: block; position: absolute; height: 14px; width: 1px;
  background: #E8E7E6; left: 14px; top: 6px;
}
.cmb-type-slider .ui-slider .ui-slider-handle:after { left: 17px; }
.cmb-type-slider .ui-slider-range.ui-widget-header { background: #004a97; }
.cmb-type-slider .cmb2-slider-value-display { margin-top: 8px; float: left; }
.cmb-type-slider .cmb2-slider-field-value-display {	float:right; font-weight: 400; font-size: 12px;	color: #888; padding-top: .5em; }

Enabling the sliding event for the CMB2 Slider Field

Now we need to use JavaScript to enable the sliding event. So I use some JQuery to accomplish the event.

/* CMB2 Slider Event. Add the code below in a file named slider_metafield.js ------------- */
window.CMB2 = (function(window, document, $, undefined){
	'use strict';
	$( '.cmb-type-slider' ).each(function() {
        var $this       = $( this );
        var $value      = $this.find( '.cmb2-slider-value' );
        var $slider     = $this.find( '.cmb2-slider' );
        var $text       = $this.find( '.cmb2-slider-value-text' );
        var slider_data = $value.data();

        $slider.slider({
            range : 'min',
            value : slider_data.start,
            min   : slider_data.min,
            step  : slider_data.step,
            max   : slider_data.max,
            slide : function( event, ui ) {
                $value.val( ui.value );
                $text.text( ui.value );
            }
        });

        // Initiate the display
        $value.val( $slider.slider( 'value' ) );
        $text.text( $slider.slider( 'value' ) );

    });
})(window, document, jQuery);

Lets Find How we can integrate CMB2 slider field in to a theme

To integrate the field in to a theme you must know "How to create custom meta boxes with CMB2"
If you know how to create custom meta boxes, then follow the codes below.

Add the following codes in you CMB2 metafields main file.

/** START --- Initialize the CMB2 Metabox & Related Classes */
function initialize_showcase_meta_box() {
	require_once('slider_metafield.php'); //CMB2 Slider Field
}
add_action('init', 'initialize_showcase_meta_box', 9999 );

/** LOAD --- Related CSS and JS */
function load_custom_cmb2_script() {
	wp_enqueue_style( 'cmb2_slider-css', 'slider_metafield.css', false, '1.0.0' ); //CMB2 Slider Field Styling
	wp_enqueue_script( 'cmb2_slider-js', 'slider_metafield.js' , '', '1.0.0', true );  // CMB2 Sliding Event
} 
add_action( 'admin_enqueue_scripts', 'load_custom_cmb2_script', 20 );

Now we are ready to use CMB2 Slider Field

$cmb->add_field( array( 
	'name'        => __('Slider Field', 'cmb2'),
        'id'          => $prefix . 'slider_field_id', //change to your prefix
        'desc'        => __('Slider Field Description.','cmb2'),
        'type'        => 'slider',
        'min'         => '0',
        'step'        => '2',
        'max'         => '100',
        'default'     => '0', // start value
        'value_label' => 'Value:',
));
About This Author

My name is Parameshwar Roy (P. Roy), and I am a web developer. This is my personal blog to record my own thoughts. Though I am not a natural writer, I love to share my experiences. Hope my experiences will be useful to you…read more about me

Leave A Reply