noUiSlider rerenders when moving slider

import { createEffect, createSignal, onCleanup } from "solid-js";
import "nouislider/dist/nouislider.css";
import noUiSlider from "nouislider";

function Slider() {
    const [sliderValue, setSliderValue] = createSignal<[number, number]>([
        20, 80,
    ]);
    let sliderContainer: HTMLDivElement | null = null;

    // Initialize the slider when the component mounts
    createEffect(() => {
        if (sliderContainer) {
            noUiSlider.create(sliderContainer, {
                start: sliderValue(),
                connect: true,
                range: {
                    min: 0,
                    max: 100,
                },
            });

            // Update sliderValue state when the slider changes
            sliderContainer.noUiSlider.on("update", (values: string[]) => {
                setSliderValue([parseFloat(values[0]), parseFloat(values[1])]);
            });
        }

        return () => {
            if (sliderContainer) {
                sliderContainer.noUiSlider.destroy();
            }
        };
    });

    return (
        <div class="slider">
            <div ref={(el) => (sliderContainer = el)}></div>
            <p>
                Slider Values: {sliderValue()[0]} - {sliderValue()[1]}
            </p>
        </div>
    );
}

export default Slider;