Enqueue CDN in WordPress

Question

I've had a look at this question

How to enqueue scripts in WordPress from CDN?

But it isn't working.

I'm trying to install this rangeSlider http://ionden.com/a/plugins/ion.rangeSlider/start.html but I can't get it to work.

I've tried to put the CDN in the header, and then follow the steps, but it didn't work.

I've tried to put the CDN in my footer, to no avail, as well as installing with npm.

My functions enqueue script currently looks like this, so I do have jQuery enqueued. I have tried to put ion-range styles and scripts in here.

function chd_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_style( 'chd-style', get_stylesheet_uri() );
    wp_enqueue_script( 'chd-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20151215', true );
    wp_enqueue_script( 'chd-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20151215', true );
    wp_register_style( 'ion_range', 'https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css' );
    wp_enqueue_style('ion_range');
    wp_register_script( 'ion_js', 'https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js', null, null, true );
wp_enqueue_script('ion_js');
    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
    wp_enqueue_script ('modernizr', get_template_directory_uri() . '/js/modernizr-custom.js');
    wp_enqueue_script ('lazy', get_template_directory_uri() . '/js/jquery.lazyload.min.js');
    wp_enqueue_style ('global', get_template_directory_uri() . '/css/global.css');
    wp_enqueue_script ('scripts', get_template_directory_uri() . '/js/scripts.js');
    wp_localize_script ('scripts', 'js_variables', array ('js_home_url' => home_url(), 'ajaxURL' => admin_url( 'admin-ajax.php' ), ''));
}
add_action( 'wp_enqueue_scripts', 'chd_scripts' );

And have put this on my front page

<input type="text" class="js-range-slider" name="my_range" value="" />

And this in my scripts

$(".js-range-slider").ionRangeSlider({
  type: "double",
  min: 0,
  max: 1000,
  from: 200,
  to: 500,
  grid: true
});

However, my input field is still default.

Any ideas?

Answer 1

https://developer.wordpress.org/reference/functions/wp_enqueue_script/

You have to define „jquery“ as dependency so that it will be loaded before your cdn dependency