Open Mearman opened 3 years ago
realised this is similar to https://github.com/mattieha/slider-button-card/issues/6 . I'm also experienced this with horizontal sliders.
@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...
@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?
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"
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.
Finally got around to trying toe beta. I can't get it to unlock. Not sure if I'm doing something stupid.
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')
Hello, I suggest this logic to fix this issue:
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!
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
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.
+1 on what Mike said. Hold to slide (with a low hold time) would seem to be the best idea.
Thanks for the great work on this I really love it.
+1
Any news for the lock feature?
+1
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.