slider-button-card touch event capture prevents scrolling on mobile

Discovered when including more sliders and then viewing on mobile.

When scrolling around a panel the touch is being captured by the sliders and preventing scrolling again. If you scroll to a point that is entirely covered by sliders, you then can't scroll back.

Not entirely sure the best way to solve this.

Jul 01 '21 16:07 Mearman

realised this is similar to https://github.com/mattieha/slider-button-card/issues/6 . I'm also experienced this with horizontal sliders.

Jul 02 '21 05:07 Mearman

@Mearman Thanks for your feedback, I've noticed this myself too. Also not 100% sure how to fix this. What do you think about this solution: #72 this would require 2 touches to use the slider though...

Jul 05 '21 19:07 mattieha

@Mearman I've added a lock feature in a beta release: v.1.11.0-beta when lock is enabled scrolling is fixed. Although it fixes the scrolling it requires you to first unlock the card before you are able to interact with it. I'm still looking into other options, for now this a working solution.

If you got time can you test this beta version?

Jul 07 '21 21:07 mattieha

Oooh thank you! I'll have a look. You could have an option that unlocks on press and hold when a touchscreen user agent is detected? If you got the device type detection working you could have it so you can choose to have separate functionality to the lock so it's just a "press and hold lock"

Jul 08 '21 07:07 Mearman

First - very happy to see these. Gives the dashboard a very nice look - thank you for your contributions. I ran into this as well when installing a draft dashboard. Would you be able to distinguish an up/down movement vs. a left/right movement? If the movement doesn't correspond to the slider motion, then don't trap it or throw it back. Easier said than done.

Or touching the action toggle then automatically unlocks the slider portion of the button for a few seconds.

Jul 08 '21 21:07 rawilt

Finally got around to trying toe beta. I can't get it to unlock. Not sure if I'm doing something stupid.

Jul 11 '21 13:07 Mearman

Same here, I cannot unlock locked button. Did not try on smartphone though, only on computer.

EDIT: I tried on mobile but same, cannot unlock the card to activate, in my case, a cover.

I saw the following error in the log:

Logger: frontend.js.latest.202107070
Source: components/system_log/__init__.py:190 
First occurred: 1:27:55 PM (4 occurrences) 
Last logged: 1:27:57 PM

https://ha/hacsfiles/slider-button-card/slider-button-card.js?hacstag=3754399611110:610:71681 TypeError: null is not an object (evaluating 'this.card.classList')
https://ha/hacsfiles/slider-button-card/slider-button-card.js?hacstag=3754399611110:610:71580 TypeError: null is not an object (evaluating 'this.card.classList')

Jul 13 '21 08:07 WhistleMaster

Hello, I suggest this logic to fix this issue:

When turned OFF only the left part of the component should be draggable, a transparent slider could do the trick.
On click or tap the component turn ON and make only an area -25px and +25px maybe, draggable.

That way you won’t have accidental touches that turn ON lights in mobile when you are just scrolling the page.

Thanks again for your great component!

Jul 27 '21 03:07 apivaral

Just wanted to pitch in an idea because I love the card but the scrolling issue makes it hard to use on mobile. The lock works, but from a usability point is not ideal since it requires an additional click. Ignoring the vertical swipe component to allow for scrolling would be ideal, as suggested by @rawilt but it might be tricky to implement. Currently, I've put the slider button card in a 1x1 grid with two conditional cards. If the entity is off it shows an entity card with an on-off toggle. This allows me to scroll. If the entity is on, it shows the slider button card and I can control the brightness of my lights but not scroll. Its not ideal, but if ignoring vertical swipes is impossible I prefer this UI over the lock. Hope this gives some inspiration. I copy paste my lovelace config below.

Cheers and thanks for the awesome card!

type: grid
cards:
  - type: conditional
    conditions:
      - entity: light.living_main_spots
        state: 'off'
    card:
      type: entities
      entities:
        - entity: light.living_main_spots
          icon: mdi:track-light
      card_mod:
        style: |
          ha-card {
            height: 100px;
          }
  - type: conditional
    conditions:
      - entity: light.living_main_spots
        state: 'on'
    card:
      type: custom:slider-button-card
      entity: light.living_main_spots
      slider:
        direction: left-right
        background: solid
        use_state_color: false
        use_percentage_bg_opacity: true
        show_track: false
        toggle_on_click: false
        force_square: false
      show_name: true
      show_state: true
      compact: false
      icon:
        show: true
        use_state_color: false
        tap_action:
          action: more-info
        icon: mdi:track-light
      action_button:
        mode: toggle
        icon: mdi:power
        show: true
        show_spinner: true
        tap_action:
          action: toggle
columns: 1
square: false

Aug 16 '21 07:08 markblokpoel

Hi! I've got the same problem with my configuration. An idea might be to add an hold action to activate the slider so with only one tap you can scroll the page without modify the slider. If you hold on a slider instead you can modify it's value.