I have this:

function cd_customizer_settings( $wp_customize ) {
    $wp_customize->add_setting( 'global_font_size' , array(
        'default'     => 16,
        'transport'   => 'postMessage',
    ) );

    $wp_customize->add_control( new WP_Customize_Range( $wp_customize, 'global_font_size', array(
        'label' =>  'Font Size Menu',
        'settings' => 'global_font_size',
        'min' => 8,
        'max' => 60,
        'step' => 1,
        'section' => 'title_tagline',
    ) ) );

}

And for the Range control class i have this :

if( class_exists( 'WP_Customize_Control' ) ) {
    class WP_Customize_Range extends WP_Customize_Control {
        public $type = 'range';

        public function __construct( $manager, $id, $args = array() ) {
            parent::__construct( $manager, $id, $args );
            $defaults = array(
                'min' => 0,
                'max' => 10,
                'step' => 1
            );
            $args = wp_parse_args( $args, $defaults );

            $this->min = $args['min'];
            $this->max = $args['max'];
            $this->step = $args['step'];
        }

        public function render_content() {
        ?>
        <label>
            <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
            <input class='range-slider' min="<?php echo $this->min ?>" max="<?php echo $this->max ?>" step="<?php echo $this->step ?>" type='range' <?php $this->link(); ?> value="<?php echo esc_attr( $this->value() ); ?>" oninput="jQuery(this).next('input').val( jQuery(this).val() )">
            <input onKeyUp="jQuery(this).prev('input').val( jQuery(this).val() )" type='text' value='<?php echo esc_attr( $this->value() ); ?>'>

        </label>
        <?php
        }
    }
}

My live preview js code is:

( function( $ ) {

  wp.customize( 'global_font_size', function( value ) {
    value.bind( function( newval ) {
      $( '.menu ul' ).css( 'font-size', newval );
    } );
  } );

} )( jQuery );

For bringing the css in i have this:

add_action( 'wp_head', 'cd_customizer_css');
function cd_customizer_css()
{
    ?>
         <style type="text/css">
             .site-header { background: #<?php echo get_theme_mod('background_color', '#ffffff'); ?>; }
             .container { max-width: <?php echo get_theme_mod('cd_container_width', 1400); ?>px; }
             .menu ul { font-size: <?php echo get_theme_mod('global_font_size', 16); ?>px; }
         </style>
    <?php
}

The problem is if i slide nothing happens until i do something else that is on a transport refresh. If i change the transport for the font-size to refresh it works perfectly. Strange thing is as you can see in my added css i have one for my backgorund color that one works and gives me a live preview without refresh but thats with the colour picker.

I also have a range slider for the container width and have the same problem with that one. Cant seem to get the range slider working with live preview.

Maybe i did something wrong in my code at first i thought maybe it was the .html in the js that needed to be changed to .css but only thing that did was not displaying the range output as text on screen.

Any help would be appreciated.