noUiSlider rerenders when moving slider

Hello, I have an issue with noUiSlider(https://refreshless.com/nouislider/) i want to make a slider with 2 knobs. Everytime i move a knob on the slider, i get the following error message in the console.

Uncaught Error: noUiSlider: Slider was already initialized.

the code looks like this

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;

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;

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;

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;

Any idea what is wrong? Much appreciated.

noUiSlider - JavaScript Range Slider | Refreshless.com

noUiSlider is a lightweight, ARIA-accessible JavaScript range slider with multi-touch and keyboard support. Great for responsive designs, and no dependencies!

noUiSlider rerenders when moving slider

Similar Threads

Similar Threads

Similar Threads