Iron router causing slider not to display

Hello there, so I am using iron:router

When just run my code without the router :

<head>
    <title>Meteor</title>
</head>

<body>
    {{> navbar }} {{> ccinfo}}
</body>```

it shows one way, but then when I run it through the router a part of it runs differently, especially the slider. This is my code pertaining to the slider

 $(function () {
     var $r = $('input[type="range"]');
     var $ruler = $('<div class="rangeslider__ruler" />');

     // Initialize
     $r.rangeslider({
         polyfill: false,
         onInit: function () {
             $ruler[0].innerHTML = getRulerRange(this.min, this.max, this.step);
             this.$range.prepend($ruler);
         }
     });

     function getRulerRange(min, max, step) {
         var range = '';
         var i = 0;

         while (i <= max) {
             range += i + ' ';
             i = i + step;
         }
         return range;
     }
     var $document = $(document);
     var selector = '[data-rangeslider]';
     var $inputRange = $(selector); /** * Example functionality to demonstrate a value feedback * and change the output's value. */

     $document.on('click', '#js-example-change-value button', function (e) {
         var $inputRange = $('[data-rangeslider]', e.target.parentNode);
         var value = $('input[type="number"]', e.target.parentNode)[0].value;
         $inputRange.val(value).change();
     }); /** * Example functionality to demonstrate programmatic attribute changes */
     $document.on('click', '#js-example-change-attributes button', function (e) {
         var $inputRange = $('[data-rangeslider]', e.target.parentNode);
         var attributes = {
             min: $('input[name="min"]', e.target.parentNode)[0].value,
             max: $('input[name="max"]', e.target.parentNode)[0].value,
             step: $('input[name="step"]', e.target.parentNode)[0].value
         };
         $inputRange.attr(attributes).rangeslider('update', true);
     }); /** * Example functionality to demonstrate destroy functionality */
     $document.on('click', '#js-example-destroy button[data-behaviour="destroy"]', function (e) {
         $('input[type="range"]', e.target.parentNode).rangeslider('destroy');
     }).on('click', '#js-example-destroy button[data-behaviour="initialize"]', function (e) {
         $('input[type="range"]', e.target.parentNode).rangeslider({
             polyfill: false
         });
     });
 });

Is there any reason in that slider code that it would run differently through the router when I just reference the template?

I want to keep on using this as the slider looks great

I am using aramk:rangeslider

Thank you

iron-meteor / iron-router

Iron router causing slider not to display #1570