Slick Slider with Nested Slider & Progress Bar - Nested slider is manipulating the parent's progress bar

Good morning everyone. Thanks in advance for your help today!

I'm trying to resolve an issue with a slick slider script that I've been working on. The goal is to have a nested slick slider, and for the movement of the child slider(s) to not impact the progress bar of the parent slider. At this time it does, and I'm not sure what I could do to prevent that.

A CodePen instance of the slider can be found here.

The JS in question is here...:

$(document).ready(function() {
  var $slider = $('.slider');
  var $sliderB = $('.slider-b');
  var $progressBar = $('.progress');
  var $progressBarLabel = $( '.slider__label' );

  $slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {   
    var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;

    $progressBar
      .css('background-size', calc + '% 100%')
      .attr('aria-valuenow', calc );

    $progressBarLabel.text( calc + '% completed' );
 });

 $slider.slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    speed: 400
 });

 $sliderB.slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   speed: 400,
   dots: true,
   arrows: false
 });  
});

The only other issue I've noticed in the demo here is that the height is thrown off as it doesn't initialize the child in the cloned copies of the slick slider. If you all have any advice on that as well, of course I'd love to learn from your input.

Thanks so much in advance for your input and guidance. I'm sure it's rather simple, but I couldn't find an example of someone else doing the same thing as I have here to reference.