Lovelace vertical scrolling with slider button cards

willheineman commented 3 years ago

Issue: You cannot scroll scroll vertically on a Lovelace dashboard if you try to start over a slider button card. The card will always interpret the action as a slide and try to set the light brightness instead of scrolling on the page.

This is happening on mobile. Tested on Android with slider-button-card v1.5.1

mattieha commented 3 years ago

@willheineman Thanks for your feedback, I'll look into this.

MaxVRAM commented 2 years ago

Thanks @mattieha. I just laid-out a super nice light control dashboard with your slider-button-card only to test it on my phone and realise I can't scroll at all. Unfortunately I'll have to give the card a pass at the moment, because the issue makes it unusable. Apart from this, the card is an excellent design that provides an visually-appealing and large form-factor slider to love-lace.

I've not developed a Lovelace card before, and haven't done much in JS/TypeScript, so excuse me if I'm off-track here. I'm guessing slider-button-card.ts lines 381-408 is the place for some love.

Perhaps onPointerDown setPointerDown could wait before it's engaged. Some example mechanics might be:

Only engage the slider after a short hold-delay with minimal pointer movement.
Only engage the slider after {X}% of horizontal movement with less than {Y}% of vertical movement.
Don't update the entity until the pointer is released off the slider, but only while it's within the slider space.
- Dismiss pointer interaction if the pointer leaves the slider during interaction, engaging standard scroll mechanics if the pointer leaves the slider area.

https://github.com/mattieha/slider-button-card/blob/3cf981ae45f059ef0a98bab4087322c9591ada85/src/slider-button-card.ts#L381-L407

samboman commented 2 years ago

I notice the same on iOS

VNRARA commented 2 years ago

As I said in #127:

I think the best solution is to change the activation of the slider to a tap-and-hold to enable/slide the slider just like how Philips Hue app does it with individual lights.

so basically what MaxVRAM said...

micmouritzen commented 2 years ago

Did you solve this issue?

rmurfster commented 2 years ago

Also having this issue. This is really a pain on Phones where you need to scroll to see more buttons. It isn't so much an issue if all the buttons fit on 1 page and you don't have to scroll.

Firesphere commented 2 years ago

Confirmed the issue still exists and is quite a disruption to the usage

MarcStocker commented 2 years ago

I cannot count the number of times I've accidentally turned on the lights and woken my partner simply because I was scrolling through a dashboard and just happened to land on one of these buttons while scrolling. I love the card, it looks fantastic, and makes for really nice dense, information rich layouts.

But the inability to scroll has unfortunately forced me to remove this from all my (mobile) dashboards and switch over to the Mushroom light entity.

@mattieha I know you've placed this bug on the roadmap. Just wondering if you happen to have an ETA for us? I'd love to reimplement these buttons. Nothing else has the same visual appeal 🙃

mattieha / slider-button-card

Lovelace vertical scrolling with slider button cards #52