Progress bar isnt properly mounted :o

[pollentung]

HI EVERYONE! : D

MY EXAMPLE PAGE

It is extensively documented so it should be easy for someone who is NOT ME as I am barely even a beginner.

I'm trying to mount this slider with this PROGRESS SLIDER. Interestingly enough, it will show in my editor preview but not on my site. With my extremely limited knowledge on JS I am GUESSING that the mounting codes are interfering with each-other.

Here is the mounting code I have already tried:

document.addEventListener('DOMContentLoaded', function() {var splide = new Splide('.splide').mount();
 } );

    var splide = new Splide( '.splide' );
      var bar    = splide.root.querySelector( '.my-slider-progress-bar' );
    
      // Updates the bar width whenever the carousel moves:
      splide.on( 'mounted move', function () {
        var end  = splide.Components.Controller.getEnd() + 1;
        var rate = Math.min( ( splide.index + 1 ) / end, 1 );
        bar.style.width = String( 100 * rate ) + '%';
      } );

  splide.mount();

Thank you so much for your time and care reading this, I appreciate you. Best wishes. c: