search

AnthonMS / my-cards

Bundle of my custom Lovelace cards for Home Assistant. Includes: my-slider, my-slider-v2, my-button
Other
104 stars 27 forks source link

Can't scroll on mobile if tap starts on slider #6

Closed TheTimeWalker closed 2 years ago

TheTimeWalker commented 3 years ago

Currently, when you want to try to scroll on mobile, the slider catches the tap and instead you change the brightness of the lamp. This seems to be pretty fine when using something like slider-row-entity.

My suggestion would be that if you tap on the slider, it would jump to the point you wanted to set. If you hold and start to scroll, then it should only catch the tap when you're on the thumb.

AnthonMS commented 2 years ago

Short answer, no.

The slider works different on iPhones and Androids. What you are describing is how the slider actually works on IOS, but android is a different thing, it jumps to the position as soon as you tap the slider anywhere.

Before when sliding on vertical sliders on an android, then it jumps to the position and scrolled the page at the same time UNLESS you tap the thumb. I have now implemented it so it's optional if you wanna lock page scrolling when using the slider. So there is a new config option that you can set to true, and then it doesn't scroll when the first tap was inside the slider container.

But this is not what you're asking. What you are asking, IS how the slider works on all my devices, except my very old iPad, which I don't have anymore. So I don't know how I can implement this for you?

TheTimeWalker commented 2 years ago

Heya, let me elaborate.

I have as you've suggested, tried it out on an iPod Touch that I own too, and you're right. iOS is doing exactly what I was thinking of. When I tap on the slider, you can scroll freely on the page. That makes it more useful on pages that are a big longer as you don't accidentally set lights, inputs, etc. when you just want to scroll on your page.

Yes, my main device is an Android device. When I would try to do the same on my Android device with the Home Assistant app (Chrome Web View) and Firefox, then this doesn't work. If you want to scroll but accidentally tap on the slider then it instead moves the slider, your page stays locked.

I saw the option already before via your latest commits, thanks for adding it to README right now. However, as far as I understand lock_scroll, it only simulates the Android behaviour on iOS. I have no option to simulate the iOS behaviour on Android. Essentially what my question is: Is there a possibility to make the behaviour on Android the same as in all of your iOS devices? The suggestion in itself was just an idea because I assumed that you wouldn't be able to scroll on iOS either.

AnthonMS commented 2 years ago

Ahh yeah, I get it now. I don't know why I though you were asking for the opposite. But I get what you are saying and I can see how that would be a nice feature to have. I don't know if I can make it work like that on android with the current setup, because I'm using a simple range slider, and without any prior research, then I dont know if I can listen for events only on the thumb.

But I do have it planned to create a more custom slider component now that I have some more web dev experience. I just don't know when I will get time for it, even though I really want to.

But I get what it is you are asking for, and I will remember it when I get to a point where the code can be changed to behave like that. I actually dislikes the way IOS handles sliders, so it never occurred to me other people liked it.

TheTimeWalker commented 2 years ago

I have found a possible super simple solution to this issue

By using the trick from Stackoverflow: https://stackoverflow.com/questions/38498342/ionic-range-input-prevents-scrolling/38857369#38857369

You can add this:

.slider-container input[type="range"] {
   pointer-events: none;
}

.slider-container input[type="range"]::-webkit-slider-thumb {
   pointer-events: auto;
}

.slider-container input[type=range]::-moz-range-thumb {
   pointer-events: auto;
}

I have quickly tried out by hacking it in and that seems to do the trick on Android.

AnthonMS commented 2 years ago

Damn, I forgot all about that css tag. Yeah that would do the trick, I will implement it in the next update. So if you have put it into the card for now, then it will work for you until I get around to getting it added. And when an update is released, this feature will be included as a new config option.