Swipe-card and slider-entity-row

[alexpod93]

I have a slider-entity-row inside swipe-card and when I changes lights parameters via slider-entity-row tab of swipe-card moving too. How can I fix it?

[jazzyisj]

Same issue as hold action. Workaround.

https://community.home-assistant.io/t/a-different-take-on-designing-a-lovelace-ui/162594/700?u=asnnetworks

[avallini]

I think I managed to find the root cause of the issue. To avoid this issue you should use the swiper parameters noSwipingClass or noSwipingSelector to target the knob of the sliders. The bad is that the swiper lib is not navigating through the shadow dom to understand if the mousedown event was on that area. The incriminated code is in the swiperjs onTouchStart.js, but I'll show that in the swipe card embedded version(minified):

if (i.noSwiping && n.closest(i.noSwipingSelector ? i.noSwipingSelector : `.${i.noSwipingClass}`)[0])
    return void (t.allowClick = !0);

n is the target of the pointer event and is the component element just outside the shadow dom. See the following definition:

When an event bubbles up from shadow DOM it's target is adjusted to maintain the encapsulation that shadow DOM provides. That is, events are re-targeted to look like they've come from the component rather than internal elements within your shadow DOM. Some events do not even propagate out of shadow DOM.

To enhance the checksI have added the following code (just after the two lines quoted above):

    if (i.noSwiping && (r.path.find(e=>e === r.target || (i.noSwipingClass && e.classList && e.classList.contains(i.noSwipingClass)) || (e.tagName && i.noSwipingSelector && e.tagName.toLowerCase() == i.noSwipingSelector.toLowerCase())) !== r.target))
        return void (t.allowClick = !0);

The idea is to check the path of the pointer event to see if the noslide class/selector is present until found or target is reached. With this I'm able to use the sliders from mobile and from pc.

Please note that I'm not a js dev and this looks more like a workaround than a proper fix.

[ScratMan]

Similar issue here, when using thermostat card or any other card with a slider (I'm using Scheduler Card), when trying to use the sliders it swipes the card instead of sliding the cursor. On desktop using web interface I can use the "right+left click and hold" workaround, but on the mobile application it's not possible.

[jack5mikemotown]

The incriminated code is in the swiperjs onTouchStart.js, but I'll show that in the swipe card embedded version(minified):

if (i.noSwiping && n.closest(i.noSwipingSelector ? i.noSwipingSelector : `.${i.noSwipingClass}`)[0])
    return void (t.allowClick = !0);

Hey, I know this was 2 years ago, but where can I find this code so I can add the extra 2 lines. I'm not seeing it anywhere. Thanks

[Jnaquin4]

I'm having the same issue, any update on this?