Git Product home page Git Product logo

Comments (9)

AnthonMS avatar AnthonMS commented on July 21, 2024

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.

from ha-slider-card.

mohyat avatar mohyat commented on July 21, 2024

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.

from ha-slider-card.

AnthonMS avatar AnthonMS commented on July 21, 2024

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.

from ha-slider-card.

mbillow avatar mbillow commented on July 21, 2024

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

from ha-slider-card.

AnthonMS avatar AnthonMS commented on July 21, 2024

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.

from ha-slider-card.

steinis123 avatar steinis123 commented on July 21, 2024

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;
        }

from ha-slider-card.

AnthonMS avatar AnthonMS commented on July 21, 2024

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?

from ha-slider-card.

AnthonMS avatar AnthonMS commented on July 21, 2024

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.

from ha-slider-card.

AnthonMS avatar AnthonMS commented on July 21, 2024

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.

from ha-slider-card.

Related Issues (10)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.