I am using the following ecosystem:

"nuxt": "3.0.0-rc.4"
"@img-comparison-slider/vue": "^7.6.0"

I have imported the ImgComparisonSlider in the component as below. I have tried using it without the <client-only> tag as well.

File : myComponent.vue

<template>
  <div class="w-full bg-theme-primary-200 px-2 py-2">
    <client-only>
      <img-comparison-slider
        class="flex justify-center items-center slider-example-opacity-and-size"
        hover="hover"
      >
        <template #first>
          <figure class="before">
            <img
              class="h-72 w-full object-cover"
              :src="imageOne"
              :alt="altOne"
            />
            <figcaption>Before</figcaption>
          </figure>
        </template>

        <template #second>
          <figure class="after">
            <img
              class="h-72 w-full object-cover"
              :src="imageTwo"
              :alt="altTwo"
            />
            <figcaption>After</figcaption>
          </figure>
        </template>
      </img-comparison-slider>
    </client-only>
  </div>
</template>

<script>
import { ImgComparisonSlider } from "@img-comparison-slider/vue";
export default {
  props: {
    imageOne: {
      type: String,
    },
    altOne: {
      type: String,
    },
    imageTwo: {
      type: String,
    },
    altTwo: {
      type: String,
    },
  },
};
</script>

The error I am getting is document is not defined. Error Log

ReferenceError: document is not defined
    at D:\myProject\node_modules\img-comparison-slider\dist\index.js:1:3640
    at D:\myProject\node_modules\img-comparison-slider\dist\index.js:1:10336
    at Object.<anonymous> (D:\myProject\node_modules\img-comparison-slider\dist\index.js:1:10340)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:190:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at async Promise.all (index 0)

Good day. I'm using this slider on my website and when I visit my website via Edge browser I get the following error:

TypeError: Unable to get property 'define' of undefined or null reference

Could you use a polyfill to avoid common errors? For example:

defineElement = function( tag, opt ){
    if( typeof customElements !== 'undefined' ){
        customElements.define( tag, opt );
    } else {
        document.registerElement( tag, opt );
    }
}
class HTMLxSearchElement extends HTMLElement{
    constructor(){
        super();
        console.log('super');
    }
}
defineElement( 'x-search', HTMLxSearchElement )

Thank you a lot.

Hi! I love this wonderful plugin. I really appreciate your efforts in coding this great plugin. But I was wondering if there is an option to make hint-icon always visible on the images. For now, It disappears when we slide the image but If we want to make it visible all the time?

Hi,

Appreciate the library. While I was setting it up with vue-cli (using vue v3.0.0), the app was returning an "Uncaught Reference Error: Vue is not defined.". I looked into it and traced the error back to the index.browser.js file.

I tried to rectify it by 'requiring' vue at the start of the file. I was able to remove the error and run the app, but the img slider shows the image vertically stacked on top of each other.

Not sure if this is an issue or I'm operating the library a little wrong.

Thanks for the help.

I have a small suggestion for this plug-in unit. if I upload two images with diffrent width and height , the style will be like this: Could you help to update the two picture's or div's as same height.

Hello,

I did the installation for Angular according to the documentation and it is with error to pass the image using the mouse. What should I do to resolve?

Is it possible to add check like if (typeof window !== 'undefined') in this place https://github.com/sneas/img-comparison-slider/blob/15f44f27d48f0f3a320eb540e4d8549e6fdc409b/src/index.ts#L396 ? Because for now Angular Universal throw error 'window is not defined'. I can create a PR if you do not mind

This screenshot is straight from the demo:

The dog shows up on the left-hand side as the "after" picture and the cat shows up on the right-hand side as the "before" picture. This is really confusing. I expect the order to be reversed, first show a before and then show an after picture.

To make it clear to users on the demo site, can we use the same image just with a filter? Say a cat image with Sepia filter? Or a day then night image as an example.

If you look at https://www.remove.bg/ you will see what I mean. Left side is always before and right side is after.

Hey there, thanks for your library, super useful for me (I'll send you the website once I get it published).

When using the slider, there's a small quirk I'd like your advice with, here it is in the video:

https://user-images.githubusercontent.com/123822/116557401-b19dcb00-a8fe-11eb-8811-90df79913e1f.mp4

In this video, I start by grabbing the handle with a click and never release the click. But we can still see that if I move fast then the slider does not go to the end of the image. Even when moving slowly it does not really go at the very beginning/end of the image sides.

And instead, sometimes it will select text around.

Is there a way to prevent this you think?

Thanks!

As the video, how to trigger slider only by dragging the handle and get "--exposure" value in the second element to set block width for hover

https://user-images.githubusercontent.com/38325453/195651743-afb36a31-b4b4-4bfd-92bd-185fa9b2c387.mov

closes #56

Hi, I needed this feature for a custom project as well, so I built it 😄 I added a new attribute direction which can be set to horizontal (which is default) or vertical, but I'm not sure if this should be switched around. I also thought about adding new keyboard controls when the slider is sliding vertically using ArrowUp and ArrowDown, but also wasn't sure if this makes sense.

Hello Sneas, awesome slider lib!

Requesting additional feature to modify the height of the divider...it would be modifiable the same way the width is.

--divider-width: 1px --divider-height: 100%

Regardless of direction you choose, thanks in advance.

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.

Code Example

<template>
  <ImgComparisonSlider direction="vertical">
    <!-- eslint-disable -->
    <img
        slot="first"
        style="width: 100%"
        src="https://img-comparison-slider.sneas.io/demo/images/before.webp"
    />
    <img
        slot="second"
        style="width: 100%"
        src="https://img-comparison-slider.sneas.io/demo/images/after.webp"
    />
    <!-- eslint-enable -->
  </ImgComparisonSlider>
</template>

<script>
import { ImgComparisonSlider } from '@img-comparison-slider/vue'

export default {
  name: 'App',
  components: {
    ImgComparisonSlider
  }
}
</script>

Expected Behavior

direction option is applied and working.

Current Behavior

direction option does not take effect.

Some Insights

1. The ImgComparisonSlider is a simple wrapper for the web component. It could be found in https://github.com/sneas/img-comparison-slider/blob/5d201518be32307d81e8d51028b51c760aca0956/bindings/vue/src/index.ts
2. The example in action could be found in https://github.com/sneas/img-comparison-slider-vue-example
3. The attribute gets applied by HMR (run the app with npm start and change the direction option back and forth. It will be applied).

When using images with an alpha channel (e.g. transparent PNGs), the existing masking approach doesn't work quite right.

The current approach assumes that .first-overlay will cover .second. When transparent images are in use, that's not a safe assumption - .second "shows through" where it shouldn't.

Fortunately, I was able to find a workaround in which I composited my background onto the images themselves. However, for a fully responsive design, it would be better to support transparent images natively.

Hi @sneas, hope you are doing well Is it possible to add a feature to animate the divider? :)

As done in this slider: https://github.com/OnurErtugral/react-image-comparison-slider

Thanks & Regards, Antariksh