Uncaught TypeError: jQuery(...).slider is not a function

Question

i am trying to use the jQuery-ui function: slider(): here's my code that i wrote inside the jQuery(document).ready...:

jQuery("#slider-wp").slider()

and in my functions.php file i wrote this code to call the jQuery library specific to slider():

function jquery_scripts(){
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-ui-slider'); 
}

add_action( 'admin_enqueue_scripts', 'jquery_scripts');

when i loaded my page i recevied this error:

i tried to look into many ressources on the internet but without success.

here's the shortcode in my functions.php file where i want to add the slider:

function rangeSlider(){
ob_start();
include 'rangeSliderfct.php';
return ob_get_clean();
}
add_shortcode('tarifs_slider', 'rangeSlider');

and here's the included php file:

<input type="text" name="value">
<div id="slider-wp"></div>

thanks for the ideas...

Answer 1

The error message is clear; the function is not exist. It would help if you looked at your dependencies. You need jQuery Core, the jQuery UI library, and the jQuery Slider library. But no worries, you should use the dependency handling from WP API via wp_enqueue_script and his internal handles to load in the correct order.

wp_register_script(
    'your-jquery-slider',
    plugin_dir_url( __FILE__ ) . './js/your-jquery-slider.js',
    [
        'jquery-ui-core',
        'jquery-ui-slider',
    ]
);
wp_enqueue_script( 'your-jquery-slider' );

With these parameters, you make sure that the libraries are in place and right order. The handle jquery is not necessary, because the WP API define jQuery as dependency for jquery-ui-core, see this documentation table. The jQuery UI Effects are not included with the jquery-ui-core handle, so you need the handle for the slider jquery-ui-slider.

Note. Use the register function and then enqueue to give other plugins the chance to remove them, is clean, and have more control for everyone.