How to make this card useable for mobile

[reidprichard]

Beautiful card, but I was frustrated that it made the dashboard unusable on my phone, as the slider would intercept my attempts to scroll. As I was in the process of replacing all of my slider-button-cards with slider-entity-rows, I figured out this solution. Maybe this is obvious to someone with more web development experience than myself, but I hope it helps someone else.

All you need is to add CSS telling the browser to interpret vertical swipes as scrolling:

style: | 
  ha-card {
    touch-action: pan-y !important;
  }
  .button {
    touch-action: pan-y !important;
  }

This solution isn't perfect, as the card visually reacts to a swipe as if you had tapped it (e.g., the slider moves, but your lights don't change). I'll post back if/when I figure that out.

[lizsugar]

Did you make any progress on this?

[Photelegy]

I just put all my slider-buttons into a grid so that there is an empty place right to swipe down.

type: vertical-stack
title: Wohnzimmer
cards:
  - type: grid
    columns: 3
    square: false
    cards:
      - type: custom:slider-button-card
        entity: cover.rollo_west
        slider:
          direction: bottom-top
          background: striped
          use_state_color: false
          toggle_on_click: false
          use_percentage_bg_opacity: false
          show_track: false
          attribute: position
          force_square: true
          invert: false
        icon:
          show: true
          tap_action:
            action: more-info
          icon: ''
          use_state_color: true
        action_button:
          tap_action:
            action: none
          hold_action:
            action: none
          mode: custom
          icon: mdi:swap-vertical
          show: true
          show_spinner: true
        compact: false
      - type: custom:slider-button-card
        entity: cover.rollo_ost
        slider:
          direction: bottom-top
          background: striped
          use_state_color: false
          toggle_on_click: false
          use_percentage_bg_opacity: false
          show_track: false
          attribute: position
          force_square: false
          invert: false
        icon:
          show: true
          tap_action:
            action: more-info
          icon: ''
          use_state_color: true
        action_button:
          tap_action:
            action: none
          hold_action:
            action: none
          mode: custom
          icon: mdi:swap-vertical
          show: true
          show_spinner: true
        compact: false
      - type: custom:button-card
        color_type: blank-card
      - type: grid
        columns: 2
        square: true
        cards:
          - type: button
            show_name: false
            show_icon: true
            icon: mdi:drag-horizontal-variant
            tap_action:
              action: call-service
              service: nodered.trigger
              service_data:
                entity_id: switch.nodered_cover_tilt
                payload:
                  entity: cover.rollo_west
                  direction: UP
                  tilt: 1
            hold_action:
              action: call-service
              service: nodered.trigger
              service_data:
                entity_id: switch.nodered_cover_tilt
                payload:
                  entity: cover.rollo_west
                  direction: UP
                  tilt: 100
            show_state: false
          - type: button
            show_name: false
            show_icon: true
            icon: mdi:drag-vertical-variant
            tap_action:
              action: call-service
              service: nodered.trigger
              service_data:
                entity_id: switch.nodered_cover_tilt
                payload:
                  entity: cover.rollo_west
                  direction: DOWN
                  tilt: 1
            hold_action:
              action: call-service
              service: nodered.trigger
              service_data:
                entity_id: switch.nodered_cover_tilt
                payload:
                  entity: cover.rollo_west
                  direction: DOWN
                  tilt: 100
            show_state: false
      - type: grid
        columns: 2
        square: true
        cards:
          - type: button
            show_name: false
            show_icon: true
            icon: mdi:drag-horizontal-variant
            tap_action:
              action: call-service
              service: nodered.trigger
              service_data:
                entity_id: switch.nodered_cover_tilt
                payload:
                  entity: cover.rollo_ost
                  direction: UP
                  tilt: 1
            hold_action:
              action: call-service
              service: nodered.trigger
              service_data:
                entity_id: switch.nodered_cover_tilt
                payload:
                  entity: cover.rollo_ost
                  direction: UP
                  tilt: 100
            show_state: false
          - type: button
            show_name: false
            show_icon: true
            icon: mdi:drag-vertical-variant
            tap_action:
              action: call-service
              service: nodered.trigger
              service_data:
                entity_id: switch.nodered_cover_tilt
                payload:
                  entity: cover.rollo_ost
                  direction: DOWN
                  tilt: 1
            hold_action:
              action: call-service
              service: nodered.trigger
              service_data:
                entity_id: switch.nodered_cover_tilt
                payload:
                  entity: cover.rollo_ost
                  direction: DOWN
                  tilt: 100
  - type: entities
    entities:
      - entity: cover.rollo_west
      - entity: cover.rollo_ost
    state_color: true
    show_header_toggle: false