Range for customiser

customiser.php

<?php 

/**
 * Create a range slider for the Customiser
 */
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
    }
  }
}

/**
 * Utilise the range slider
 */

static function font_size_range_slider( $name, $min, $max, $step, $default, $section) {
  $wp_customize->add_setting( $name , array(
    'default'   => $default,
    'transport' => 'postMessage',
  ) );

  $wp_customize->add_control( new WP_Customize_Range( $wp_customize, $name, array(
    'label'   =>  _( 'H1 Font size', 'drivkraft' ),
    'min'     => $min,
    'max'     => $max,
    'step'    => $step,
    'section' => $section
  ) ) );
}

// Build the sliders:         Name                  Min Max  Step Default Section
self::font_size_range_slider( 'craft_h1_font_size', 8,  144, 1,   32,     'typography' );
self::font_size_range_slider( 'craft_h2_font_size', 8,  144, 1,   24,     'typography' );
self::font_size_range_slider( 'craft_h3_font_size', 8,  144, 1,   20,     'typography' );
self::font_size_range_slider( 'craft_h4_font_size', 8,  144, 1,   16,     'typography' );
self::font_size_range_slider( 'craft_h5_font_size', 8,  144, 1,   16,     'typography' );


/**
 * Convert theme mod range value into REM
 * @param  [type]   $mod     [The name of the theme_mod]
 * @return [type]            [Returns the value divided by 16 with the unit 'rem' added]
 */
static function range_to_rem( $mod ) {
  $get_mod   = get_theme_mod( $mod );
  // If there is no theme_mod, gracefully return;
  if ( ! $get_mod ) {
    return 'inherit';
  }
  // Convert value to float
  $float_mod = floatval( $get_mod );
  // Divide by 16 to calculate px to rem
  $do_math   = $float_mod / 16;
  // Add unit to end of float
  $add_unit  = $do_math . 'rem';
  // Return the whole thang
  return $add_unit;
} 


// Load in the styles to match font sizes
$h1_font_size = self::range_to_rem( 'craft_h1_font_size' );
$h2_font_size = self::range_to_rem( 'craft_h2_font_size' );
$h3_font_size = self::range_to_rem( 'craft_h3_font_size' );
$h4_font_size = self::range_to_rem( 'craft_h4_font_size' );
$h5_font_size = self::range_to_rem( 'craft_h5_font_size' );
?>

<style>
  h1 { font-size: <?php echo $h1_font_size; ?>; }
  h2 { font-size: <?php echo $h2_font_size; ?>; }
  h3 { font-size: <?php echo $h3_font_size; ?>; }
  h4 { font-size: <?php echo $h4_font_size; ?>; }
  h5 { font-size: <?php echo $h5_font_size; ?>; }
</style>