Help: Cannot add noUiSlider to Svelte component

[SkepticMystic]

Hi there!

I'm trying to get your awesome tool working in a Svelte component. This is my current set up:

<script lang='ts>
let slider: HTMLElement;

onMount(() => {
    noUiSlider.create(slider, {
        start: [20, 80],
    connect: true,
    range: {
           min: 0,
           max: 100,
    },
    });
});
</script>

<div class='slider' bind:this={slider} />

I'm not sure how familiar you are with Svelte, but a couple of things are happening here:

1. Bind the div element to the js variable slider
2. This only happens after the component is mounted, so that's why I create the noUiSlider inside onMount
3. It seems to insert the html elements into the right place of the dom:

But no slider is actually visible on the page. Can you please advise if I'm doing something wrong here

[leongersen]

Your setup looks good. Did you include/load the stylesheet?

[SkepticMystic]

@leongersen stylesheet? What stylesheet! Lol, that's probably it. Can you point me to where and how I can do that?

[leongersen]

I don't know your build system, but if you are using a bundler like Webpack, you are likely doing something like:

import * as noUiSlider from 'nouislider';

You'd add:

import 'nouislider/dist/nouislider.css';

[SkepticMystic]

Simply import it? Will it get applied by itself? I guess it's just css, so yeah

[SkepticMystic]

Just importing it doesn't change anything...

[leongersen]

I don't have details on your build system, so I don't have any more details there. If you inspect the slider element in the browser, do you see CSS applied?

[SkepticMystic]

Importing it inside the script tag didn't do it. Using svelte:head makes it appear in the element inspector, but the styles still aren't being applied:

<svelte:head>
    <link rel="stylesheet" href="nouislider/dist/nouislider.css" />
</svelte:head>

[SkepticMystic]

@leongersen I ended up just copy pasting the css into my app's stylesheet, and now it works 😅

[github-actions[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.