$wp_customize->add_setting( 'boxed_body_border_width', array(
    'default'           => '0',
    'transport'         => 'postMessage',
    'sanitize_callback' => 'mytheme_sanitize_integer',
) );
$wp_customize->add_control(new Slider_Control( $wp_customize, 'boxed_body_border_width', array(
    'label'       => esc_html__( 'Boxed Body Border Width (px)', 'mytheme' ),
    'section'     => 'section_general',
) ) );

/**
 * Slider custom control
 *
 * @package WordPress
 * @subpackage inc/customizer
 * @version 1.0.0
 * @author  dingo_d
 * @license https://www.gnu.org/licenses/gpl-3.0.txt GNU/GPLv3
 * @since  1.0.0
 */
class Slider_Control extends WP_Customize_Control {
    /**
     * Control type
     *
     * @var string
     */
    public $type = 'slider_control';
    /**
     * Control scripts and styles enqueue
     *
     * @since 1.0.0
     */
    public function enqueue() {
        wp_enqueue_script( 'custom_controls', UTTER_TEMPPATH . '/inc/customizer/js/custom-controls.js', array( 'jquery', 'jquery-ui-slider' ), UTTER_THEME_VERSION, true );
        wp_enqueue_style( 'custom_controls_css', UTTER_TEMPPATH . '/inc/customizer/css/custom-controls.css' );
    }
    /**
     * Control method
     *
     * @since 1.0.0
     */
    public function render_content() {
    ?>
        <div class="slider_control">
            <span class="customize-control-title"><?php echo esc_html( $this->label ); ?><span class="slider_value"><?php echo esc_attr( $this->value() ); ?></span></span>
            <p><?php echo esc_html( $this->description ); ?></p>
            <input class="slider_input" type="text" name="<?php echo esc_attr( $this->id ); ?>" value="<?php echo esc_attr( $this->value() ); ?>" data-customize-setting-link="<?php echo esc_attr( $this->id ); ?>" />
            <div class="slider-range"></div>
        </div>
    <?php
    }
}

/********* Slider Custom control ***********/
$('.slider-range').slider({
    range: "min",
    value: 0,
    step: 1,
    min: 0,
    max: 100,
    slide: function(event, ui) {
        var $this = $(this);
        $this.parent().find('.slider_input').attr('value', ui.value);
        $this.parent().find('.slider_value').html(ui.value)
             .trigger('change');
    }
});

/* Slider */
.slider_value{
    margin-left: 20px;
}

.ui-slider {
    position: relative;
    text-align: left;
    margin-top: 20px;
    background: #ddd;
    border-radius: 2px;
}
.ui-slider .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 1.2em;
    height: 1.2em;
    cursor: default;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 5px;
    -ms-touch-action: none;
    touch-action: none;
}
.ui-slider .ui-slider-range {
    position: absolute;
    z-index: 1;
    font-size: .7em;
    display: block;
    border: 0;
    background-position: 0 0;
}

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
    filter: inherit;
}

.ui-slider-horizontal {
    height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
    top: -.3em;
    margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
    top: 0;
    height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
    left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
    right: 0;
}

.ui-slider-vertical {
    width: .8em;
    height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
    left: -.3em;
    margin-left: 0;
    margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
    left: 0;
    width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
    bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
    top: 0;
}

function mytheme_dynamic_css_targets( value ) {
    var css_styles_targets = '<style id="customizer_dynamic_color_css_' + value + '" type="text/css"></style>';
    if ( ! $( '#customizer_dynamic_color_css_' + value ).length) {
        $( '#mytheme_main_css-inline-css' ).after( css_styles_targets );
    }
}

// Boxed Body Border width
wp.customize( 'boxed_body_border_width', function(value) {
    value.bind(function(newval) {
        mytheme_dynamic_css_targets( 'boxed_body_border_width' );
        var width = '.boxed_body_wrapper{border-right-width: ' + newval + '; border-left-width: ' + newval + ';}';
        $( '#customizer_dynamic_color_css_boxed_body_border_width' ).text( width );

    });
});