Feature Request: Svelte support

[VisionaryAppDev]

Hello everyone,
I have tried this package before on NuxtJS and it's working perfect. I do like it a lot and thinking of using this package again with SvelteKit, but it seem like it isn't supported at the moment. So, will img-comparison-slider support Svelte anything soon? Or is there a way I can make it working with Svelte at the moment? Thanks.

[sneas]

Hi @VisionaryAppDev, it seems like img-comparison-slider somewhat works in Svelte out of the box. By somewhat I mean it doesn't support any component's attribute except "value". I guess there is something to do with the Svelte's attribute binding system. But there is a way to set custom attribute via bind:this. Check out the example I created https://github.com/sneas/img-comparison-slider-svelte

The trick is:

1. Install img-comparison-slider https://github.com/sneas/img-comparison-slider-svelte/blob/main/package.json#L21
2. Import img-comparison-slider in main.js https://github.com/sneas/img-comparison-slider-svelte/blob/main/src/main.js#L2
3. Use the component https://github.com/sneas/img-comparison-slider-svelte/blob/main/src/App.svelte#L16-L27

Pay attention how I set up custom direction attribute with the help of the binder and onMount function. You might want to do the same for other attributes if needed.

[VisionaryAppDev]

Thank a lot @sneas. From your trick, I have managed to get it working with SvelteKit now.

custom attribute via bind:this

For SvelteKit, I could assign it directly. Not sure if it is a SvelteKit thing as I am also new to Svelte. Please check it here https://github.com/VisionaryAppDev/img-comparison-slider-svelte-kit/blob/master/src/routes/index.svelte

[sneas]

Looks great, @VisionaryAppDev. I'm happy your way is working because it seems cleaner. I'm also new to Svelte :)