search

sneas / img-comparison-slider

Image comparison slider. Compare images before and after. Supports React, Vue, Angular.
https://img-comparison-slider.sneas.io
MIT License
656 stars 47 forks source link

Feature Request: Svelte support #93

Open VisionaryAppDev opened 2 years ago

VisionaryAppDev commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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