slider-block | Gutenblock for a slider/slideshow | Animation library

This is a bit of a specific issue, but I'm hoping I'm not alone with it!

After updating to WP 5.6, all of my websites are having issues rendering a Slick Slider in the Block Editor. On the front-end, the sliders are fine.

I believe the issue is that if I have a block with Slick Slider inside it, and that block is set to 'full width' in the WP editor, Slick Slider is unable to find the correct size of the window within the block editor. The sliders then expand beyond the viewport, pushing the block editor settings box off-screen and making the editor pretty unusable.

As the title suggests, I'm using the latest version of slick slider, and I'm rendering this through a custom ACF Block within WP 5.6.

Prior to 5.6 everything rendered just fine. I'm hoping the solution is a simple CSS change, but I can't for the life of my find something that works.

Here is my code:

I created a custom Gutenberg block to display a slider.

I'm using the example from ACF: https://www.advancedcustomfields.com/blog/building-a-custom-slider-block-in-30-minutes-with-acf/

Everything works fine so far. But now I need the block ID inside of the JavaScrit file of the custom block.

Here's the JS code from the example:

I've created a range slider that showcases different banner sizes visually. I'm trying to create a function that allows the input-range-thumb to change it's background color when a .mousedown and a .mouseup event is triggered. I read that there is no way to select the thumb directly using simple Jquery. I read that creating a class, and using an .AddClass method is best.

I've attempted this myself, and i can't seem to figure out why the thumb will not change colors.

Could you look at my code?

https://codepen.io/stinkytofu3311/pen/LWomev

Live slideshow https://www.baywaycopperalloys.com

The following styling sizes Drupal 8 Views Slideshow slides correctly in all browsers except IE 11. .img-responsive is the selector applied.