Skip to main content
2 of 2
fixed formatting
cjbj
  • 15k
  • 16
  • 42
  • 89

bootstrap-slider.js by seiyria not working in wordpress

bootstrap-slider.js offered by seiyria not working in WordPress. It seems that resource file isn't linked properly. What am I missing here? Any idea?

Link Resource to WordPress(functions.php):

if (!function_exists('techcare_enqueue_scripts')):
function techcare_enqueue_scripts() {

    /*  Enqueue Scripts Begin */

    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', get_template_directory_uri().
        '/scripts/jquery-2.1.4.js', false, null, false);

    wp_deregister_script('modernizr');
    wp_enqueue_script('modernizr', get_template_directory_uri().
        '/scripts/modernizr.min.js', false, null, false);

    wp_deregister_script('classie');
    wp_enqueue_script('classie', get_template_directory_uri().
        '/scripts/classie.js', false, null, false);

    wp_deregister_script('api');
    wp_enqueue_script('api', 'https://www.google.com/recaptcha/api.js', false, null, false);

    wp_deregister_script('script-1');
    wp_enqueue_script('script-1', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBJPGck9G3Pf4f912F_NyyEPFU9mOroxKo&callback=initMap', false, null, false);

    wp_deregister_script('script-2');
    wp_enqueue_script('script-2', 'https://maps.googleapis.com/maps/api/js?sensor=false', false, null, false);

    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', get_template_directory_uri().
        '/scripts/jquery-2.1.4.js', false, null, true);

    wp_deregister_script('jquerymagnificpopup');
    wp_enqueue_script('jquerymagnificpopup', get_template_directory_uri().
        '/scripts/jquery.magnific-popup.min.js', false, null, true);

    wp_deregister_script('smoothscroll');
    wp_enqueue_script('smoothscroll', get_template_directory_uri().
        '/scripts/SmoothScroll.js', false, null, true);

    wp_deregister_script('apscrolltop');
    wp_enqueue_script('apscrolltop', get_template_directory_uri().
        '/scripts/ap-scroll-top.js', false, null, true);

    wp_deregister_script('bootstrapdatepicker');
    wp_enqueue_script('bootstrapdatepicker', get_template_directory_uri().
        '/scripts/bootstrap-datepicker.min.js', false, null, true);

    wp_deregister_script('bootstrap');
    wp_enqueue_script('bootstrap', get_template_directory_uri().
        '/scripts/bootstrap.min.js', false, null, true);

    wp_deregister_script('wow');
    wp_enqueue_script('wow', get_template_directory_uri().
        '/scripts/wow.min.js', false, null, true);

    wp_deregister_script('main');
    wp_enqueue_script('main', get_template_directory_uri().
        '/scripts/main.js', false, null, true);

    wp_deregister_script('jquerycounterup');
    wp_enqueue_script('jquerycounterup', get_template_directory_uri().
        '/scripts/jquery.counterup.min.js', false, null, true);

    wp_deregister_script('waypoints');
    wp_enqueue_script('waypoints', get_template_directory_uri().
        '/../cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js', false, null, true);

    wp_deregister_script('slick');
    wp_enqueue_script('slick', get_template_directory_uri().
        '/scripts/slick.min.js', false, null, true);

    wp_deregister_script('jqueryvalidate');
    wp_enqueue_script('jqueryvalidate', get_template_directory_uri().
        '/scripts/vendor/jquery-validation/jquery.validate.min.js', false, null, true);

    wp_deregister_script('jqueryvalidateunobtrusive');
    wp_enqueue_script('jqueryvalidateunobtrusive', get_template_directory_uri().
        '/scripts/vendor/jquery-validation/jquery.validate.unobtrusive.min.js', false, null, true);

    wp_deregister_script('ajaxhandler');
    wp_enqueue_script('ajaxhandler', get_template_directory_uri().
        '/scripts/ajaxhandler.js', false, null, true);


    wp_deregister_script('script-3');
    wp_enqueue_script('script-3', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBJPGck9G3Pf4f912F_NyyEPFU9mOroxKo&callback=initMap', false, null, false);

    wp_deregister_script('script-4');
    wp_enqueue_script('script-4', 'https://maps.googleapis.com/maps/api/js?sensor=false', false, null, false);

    wp_deregister_script('bootstrapslider');
    wp_enqueue_script('bootstrapslider', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/bootstrap-slider.js', false, null, false);

    wp_deregister_script('bootstrapslider');
    wp_enqueue_script('bootstrapslider', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/bootstrap-slider.min.js', false, null, false);

    /*  Enqueue Scripts End */

    /*  Enqueue Styles Begin */

    wp_deregister_style('bootstrap');
    wp_enqueue_style('bootstrap', get_template_directory_uri().
        '/css/bootstrap.min.css', false, null, 'all');

    wp_deregister_style('bootstrapdatepicker');
    wp_enqueue_style('bootstrapdatepicker', get_template_directory_uri().
        '/Css/bootstrap-datepicker3.css', false, null, 'all');

    wp_deregister_style('fontawesome');
    wp_enqueue_style('fontawesome', get_template_directory_uri().
        '/css/font-awesome.css', false, null, 'all');

    wp_deregister_style('animate');
    wp_enqueue_style('animate', get_template_directory_uri().
        '/css/animate.css', false, null, 'all');

    wp_deregister_style('effect');
    wp_enqueue_style('effect', get_template_directory_uri().
        '/css/effect1.css', false, null, 'all');

    wp_deregister_style('style');
    wp_enqueue_style('style', get_template_directory_uri().
        '/css/style.css', false, null, 'all');

    wp_deregister_style('responsive');
    wp_enqueue_style('responsive', get_template_directory_uri().
        '/css/responsive.css', false, null, 'all');

    wp_deregister_style('rotate');
    wp_enqueue_style('rotate', get_template_directory_uri().
        '/css/rotate.css', false, null, 'all');

    wp_deregister_style('normalize');
    wp_enqueue_style('normalize', get_template_directory_uri().
        '/css/normalize.css', false, null, 'all');

    wp_deregister_style('set');
    wp_enqueue_style('set', get_template_directory_uri().
        '/css/set1.css', false, null, 'all');

    wp_deregister_style('pricing');
    wp_enqueue_style('pricing', get_template_directory_uri().
        '/css/pricing.css', false, null, 'all');


    wp_deregister_style('bootstrapslider');
    wp_enqueue_style('bootstrapslider', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/css/bootstrap-slider.css', false, null, 'all');

    wp_deregister_style('bootstrapslider');
    wp_enqueue_style('bootstrapslider', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/css/bootstrap-slider.min.css', false, null, 'all');

    wp_deregister_style('intltelinput');
    wp_enqueue_style('intltelinput', get_template_directory_uri().
        '/countryCode/css/intlTelInput.css', false, null, 'all');


    /*  Enqueue Styles End */

}
add_action('wp_enqueue_scripts', 'techcare_enqueue_scripts');
endif;

Link Resource to WordPress (portion of code):

wp_deregister_script( 'bootstrapslider' );
wp_enqueue_script( 'bootstrapslider', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/bootstrap-slider.js', false, null, false);

wp_deregister_script( 'bootstrapslider' );
wp_enqueue_script( 'bootstrapslider', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/bootstrap-slider.min.js', false, null, false);

wp_deregister_style( 'bootstrapslider' );
wp_enqueue_style( 'bootstrapslider', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/css/bootstrap-slider.css', false, null, 'all');

wp_deregister_style( 'bootstrapslider' );
wp_enqueue_style( 'bootstrapslider', 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/css/bootstrap-slider.min.css', false, null, 'all');

Here's the HTML part :

<input id="web" data-slider-id='web' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="0" />

JQuery Part :

        // With JQuery
        $("#web").slider();
        $("#web").on("slide", function(slideEvt) {
        $("#webVal").text(slideEvt.value);
        $("#web1Val").text('$'+slideEvt.value);
        $("#web2Val").text('$'+slideEvt.value*10);
        $("#looking").text('a Web');
        });

Here's the demo page link.