bootstrap-slider.js by seiyria not working in wordpress

Question

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.

edit your question to explain what is not working
– mmm
Commented Apr 29, 2017 at 13:15 — mmm, Commented Apr 29, 2017 at 13:15

cjbj · Accepted Answer · 2017-04-29 12:35:38Z

I took a look at your page. The code is a mess, full of html errors. In your question's code above you're queuing and dequeuing the script file four times, so it ends up once in the page header. In the page body you are also hardloading it four times.

The script that you include halfway the body then does not take into account that WordPress loads jquery in nonconflict mode, meaning you cannot use the $ selector. The latter may be the main reason why your slider doesn't work, but I suggest you also smooth out the rest of your code.

Ashiqur Rahman · Accepted Answer · 2017-04-30 06:35:30Z

0

I need to add scripts code after

<?php wp_footer(); ?>
<scripts> //js code here </scripts>

section. Then it will be work fine.

answered Apr 30, 2017 at 6:35

Ashiqur Rahman

1011 bronze badge

Add a comment |

Stack Exchange Network

bootstrap-slider.js by seiyria not working in wordpress

2 Answers 2

Your Answer

Not the answer you're looking for? Browse other questions tagged
jquery
javascript
wp-enqueue-script
or ask your own question.

Hot Network Questions

bootstrap-slider.js by seiyria not working in wordpress

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged jqueryjavascriptwp-enqueue-script or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
jquery
javascript
wp-enqueue-script
or ask your own question.