Handle Issue with Vue.js

[domenicbetters]

Hey there, I was hoping to change the handle with this slider in my vue.js app.

I'm following the instructions posted in the readme.

Handle The handle of the component can be changed by assigning the attribute slot="handle" to any element within img-comparison-slider.

However I get an error saying "slot" was deprecated.

Is there a good workaround for this?

[domenicbetters]

Also, I should probably make sure I'm even doing this correctly. Here is my container with the slot handle code

hope this helps

[sneas]

Hi Domenic, yes, you're doing it correctly.

You should wrap all the img tags with <!-- eslint-disable -->

<!-- eslint-disable -->
<img slot="handle"  src="@/assets/sliderbutton.png" />
<img
  slot="first"
  style="width: 100%"
  src="@/assets/before.png"
/>
<img
  slot="second"
  style="width: 100%"
  src="@/assets/after.png"
/>
<!-- eslint-enable -->

This component utilizes HTML slot attributes, which are totally valid and will not be deprecated in the upcoming future https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot.

[sneas]

This SO answer might shed some light as well https://stackoverflow.com/a/69301096/379949

[domenicbetters]

Oh jesus, it was as simple as that huh. Thanks a ton.

[sneas]

I’m glad it helped 😊