Border black line shows the first time you start to move the slider

[ltz35]

I see a border line black when I first touch the slider... If I click somewhere else and return on the slider, it is fine, but the first time there is always this big black line that shows 😣

I succeeded in getting rid of it by checking the other image examples and switching to the 'Automatic slide on mouse over' code 😉 - this way, you don't have to 'click' on the slider and the black border does not show... Trouble is, on mobile, you HAVE to touch it to move the slider... 😫 It is really ugly. Do you have an idea on how to remove it??

My website is under construction, but if needed, I can give the password to access it

[sneas]

Hi the component sets :focus pseudo class when focused and it might interefere with other CSS rules. Perhaps something sets border, or outline to all the focused elements.

As an experiment, try the following in your CSS:

img-comparison-slider {
  outline: none;
}

You can also better debug the problem if you right-click the element in Chrome Developer Tools, and forcefully set :focus state on it:

If you are still struggling with the problem, then feel free to share the website address and credentials with me on dmytro@sneas.io

Good luck!

[ltz35]

Thank you!!!!!! It didn't work as is, but I didn't know that trick to force the state in focus, neet trick 🤗🥰 -for info, I don't have Chrome but works too in Firefox, I just had to select both 'focus' and 'focus-visible' 😉- I couldn't find that outline anywhere yesterday so impossible to know how to make it disappear. With this tweak, and your help, I found the solution: img-comparison-slider: focus { outline: none; } Looks perfect, thank youuuu 😜🎉