ios ha app - slider not working

[mohyat]

Slider card not working on ios.

On android is working ok.

[AnthonMS]

Are you sure it's not because you're not tapping the actual thumb. In my little experience I have with ios, that seems to be the problem. I don't know how to get around that on ios and I don't have one to test it with.

[mohyat]

Are you sure it's not because you're not tapping the actual thumb.
Yes.

I tryed on iphone 6 plus and ipad mini 3, and is not working.

[AnthonMS]

What exactly is it, that's not working? Does it not slide correctly? Does it not show the correct value? Does it show some red error message where the card should be? If so, please prove a screenshot of error message.
It would make it easier to know what you are doing and what is happening.

Please provide following information:

• How did you install the Custom Card? And have you imported it correctly?
• How are you using it? Yaml or GUI Setup? (If you can provide the yaml code for the slider card, that would also be great)
• What are you expecting to happen?
• What is happening instead?
• Does the log say anything? If so, please provide the snippet that involves this issue.
• Are you using the safari browser or the companion app?

I have an old Ipad laying around somewhere I can test it out with when I have time. But I'm unfortunately strapped for time right now. Working full time at a new job and renovating house in my spare time.

I will update here when I have had time to test around with it. If enough other people start complaining, I might do it a bit quicker. So everyone else, just comment if you are experiencing the same problems.

[mbillow]

Phew, it isn’t just me. 🥲

IMG_5235.MP4

iOS doesn’t denote screen interactions in recordings, unfortunately. But this is a video showing you can tap on a certain percentage but trying to slide doesn’t do anything. You can see it scroll a little at the end which is a side effect of a slightly angled attempt to slide the bar.

I haven’t gotten around to publishing my full YAML config yet, but this section is mostly grabbed from here: https://github.com/TBens/lovelace-ui-minimalist/blob/db4b250248c4c6a1666061d358844ee529c4cd99/lovelace/button_card_templates/button_card_templates.yaml#L615

[AnthonMS]

Okay, sorry you guys are having trouble with the card.
That does look weird, I have used the slider on an ipad 3-4 months ago, and the problem I found was, I couldn't tap anywhere on the slider, I had to pull in the thumb and only the thumb, if I tried starting the slide from anywhere other than the thumb, then it wouldn't register the slide, kinda like this.

I will see if I can find some time to test it with the old ipad again soon.

[steinis123]

Found a solution for this problem:

Added the thumbWidth: '20px' and a little color diff.

   item2:
    card:
      type: 'custom:slider-card'
      entity: '[[[ return variables.entity ]]]'
      radius: 14px
      height: 42px
      mainSliderColor: rgba(var(--color-yellow),1)
      secondarySliderColor: rgba(var(--color-yellow),0.2)
      mainSliderColorOff: rgba(var(--color-theme),0.05)
      secondarySliderColorOff: rgba(var(--color-theme),0.05)
      thumbColor: rgba(var(--color-yellow),0.4)
      thumbColorOff: rgba(var(--color-theme),0.55)
      thumbHorizontalPadding: '0px'
      thumbVerticalPadding: '0px'   
      thumbWidth: '20px'        
      card_mod:
      style: |
        ha-card {
          border-radius: 14px;
          box-shadow: none;
        }

[AnthonMS]

Found a solution for this problem:

Added the thumbWidth: '20px' and a little color diff.

Ok, so there is no problem? It's just because on iOS you have to touch the thumb to slide it, or what?

[AnthonMS]

Just to update. I am 100% sure it's because of the way IOS handles input ranges. You just have to touch the slider thumb for it to register the sliding effect.

I am planning on trying out some different npm touch slider packages now that the project uses node/npm. Hopefully someone else has already made a slider that works better on ios.

[AnthonMS]

This repo has been archived, becuase of some major changes breaking peoples setups.

Read the readme to find new repo link. You are more than welcome to make this issue on the new repo.