Alpine is reinitializing a component after a popstate event

[tossik8]

I am facing an issue where alpine is reinitializing my component causing a duplication of elements on the page.
Initially:

Reinitialized:

This is only occuring when I use the back button in the browser. I am using htmx and there is no issue when I receive html responses: I had 1 slider, sent a request, got a new response, and I still have just 1 slider. This issue is exclusively when I navigate back and forth using browser navigation buttons.
main.js

import Alpine from "alpinejs";
import slider from "./macros/slider/slider";

window.Alpine = Alpine;

Alpine.data("slider", slider);
Alpine.start();

I am aware that Alpine.start() should run only once, and as far as I am concerned, this is how it is in my case. This script file is delivered only once with HTMX on initial page load.

slider.js

import noUiSlider from "nouislider";

/**
 *
 * @param {number[]} values
 * @param {number} step
 * @param {string} event
 * @returns
 */
export default (values, step, event) => ({
    init() {
        this.slider = noUiSlider.create(this.$el, {
            connect: true,
            range: {
                min: values[0],
                max: values[1]
            },
            format: {
                to: function (value) {
                    return parseInt(value);
                },
                from: function (value) {
                    return parseInt(value);
                }
            },
            step: step,
            start: [values[0], values[1]]
        });
        const min = values[0];
        const max = values[1];
        this.slider.on("slide", (values) => {
            window.dispatchEvent(
                new CustomEvent(event, {
                    detail: {
                        trigger: this.$el.id,
                        min: values[0] === min ? "" : values[0],
                        max: values[1] === max ? "" : values[1]
                    }
                })
            );
        });
    },
    
    setHandles(newValues) {
        if (newValues.trigger !== this.$el.id) {
            this.slider.set(
                [newValues.min || values[0], newValues.max || values[1]],
                false,
                false
            );
        }
    }
});

I am initializing my slider component using another library.

<div
    :id="$id('slider')"
    x-data="slider([500, 1500], 100, 'price-changed')"
    @price-changed.window="setHandles($event.detail)"
    class="mt-3 px-3"
></div>

This all of the html required for the library. It inserts the generated elements inside of the div. After reinitialization, I still have just this single div, but I have 2 children inside of it instead of 1.

How can I resolve this?

[tossik8]

I solved it as follows:

import noUiSlider from "nouislider";

/**
 *
 * @param {number[]} values
 * @param {number} step
 * @param {string} event
 * @returns
 */
export default (values, step, event) => ({
    init() {
        this.slider = noUiSlider.create(this.$el, {
            connect: true,
            range: {
                min: values[0],
                max: values[1]
            },
            format: {
                to: function (value) {
                    return parseInt(value);
                },
                from: function (value) {
                    return parseInt(value);
                }
            },
            step: step,
            start: [values[0], values[1]]
        });
        const min = values[0];
        const max = values[1];
        this.slider.on("slide", (values) => {
            window.dispatchEvent(
                new CustomEvent(event, {
                    detail: {
                        trigger: this.$el.id,
                        min: values[0] === min ? "" : values[0],
                        max: values[1] === max ? "" : values[1]
                    }
                })
            );
        });
        if (this.$el.children.length > 1) {
            this.$el.children[0].remove()
        }
    },

    setHandles(newValues) {
        if (newValues.trigger !== this.$el.id) {
            this.slider.set(
                [newValues.min || values[0], newValues.max || values[1]],
                false,
                false
            );
        }
    }
});

I manually remove the previous slider in the initializer.

I have to do it this way because, while the destroy hook works and correctly removes the element, when popstate event happens, the browser restores all the DOM elements that were present on the page without the effects of the destroy hook. In other words, the previous slider is still present there despite the destroy.