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;
noUiSlider is a lightweight, ARIA-accessible JavaScript range slider with multi-touch and keyboard support. Great for responsive designs, and no dependencies!