Remount Progress bar after breakpoint destroy

[katwlodarczyk]

Hello, I have a mobile slider with a progress bar that is being destroyed on desktop.
I need to remount the progress bar after resizing the screen back to mobile width but Im not entirely sure how to do it.
I've tried to create my own extension but it errors with 'Cannot read properties of undefined (reading 'Controller')'
Here is my .js file

import "@splidejs/splide/css";

import Splide from "@splidejs/splide";


document.addEventListener("DOMContentLoaded", () => {

    let blocks = document.querySelectorAll(".block_reviews");

    blocks.forEach((block) => {
        let slider = new Splide(block, {
            type: "slide",
            snap: true,
            focus: "start",
            padding: "24px",
            gap: "32px",
            perPage: 1.25,
            autoWidth: true,
            mediaQuery: "min",
            breakpoints: {
                768: {
                    destroy: true,
                },
            },
            arrows: false,
            pagination: false,
        });
        // progress bar
        let bar = slider.root.querySelector(".my-carousel-progress-bar");

        slider.on("mounted move", function () {
            console.log(slider);
            var end = slider.Components.Controller.getEnd() + 1;
            var rate = Math.min((slider.index + 1) / end, 1);
            bar.style.width = String(100 * rate) + "%";
        });

        // Create a component(extension).
        const ProgressBar = (slider) => {
            function progressBar(slider) {
                console.log(slider);
                var end = slider.Components.Controller.getEnd() + 1;
                var rate = Math.min((slider.index + 1) / end, 1);
                bar.style.width = String(100 * rate) + "%";
            }

            // Return the component object.
            return {
                mount() {
                    slider.on("move", progressBar);
                },
            };
        };

        // Call mount() with the component.
        slider.mount({ ProgressBar });
    });
});

[katwlodarczyk]

Ok so i was passing a slider into the function progressBar, and I shouldn't have.
Here is a working code:

import "@splidejs/splide/css";

import Splide from "@splidejs/splide";

document.addEventListener("DOMContentLoaded", () => {
    let blocks = document.querySelectorAll(".block_reviews");

    blocks.forEach((block) => {
        let slider = new Splide(block, {
            type: "slide",
            snap: true,
            focus: "start",
            padding: "24px",
            gap: "32px",
            perPage: 1.25,
            autoWidth: true,
            mediaQuery: "min",
            breakpoints: {
                768: {
                    destroy: true,
                },
            },
            arrows: false,
            pagination: false,
        });
        // progress bar
        let bar = document.querySelector(".my-carousel-progress-bar");

        // Create a component(extension).
        const ProgressBar = (Splide) => {
            function progressBar() {
                var end = slider.Components.Controller.getEnd() + 1;
                var rate = Math.min((slider.index + 1) / end, 1);
                bar.style.width = String(100 * rate) + "%";
            }

            // Return the component object.
            return {
                mount() {
                    Splide.on("mounted move", progressBar);
                },
            };
        };

        // Call mount() with the component.
        slider.mount({ ProgressBar });
    });
});