A slider lacks the slider part on iOS

[randomdecoded]

Checklist

• [X] I have updated to the latest available Home Assistant version.
• [X] I have cleared the cache of my browser.
• [X] I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

I've been using this slider for a while on the web frontend for a while. It worked just fine on iOS. I noticed recently that the slider isn't a slider anymore on iOS. It's just a widget which displays a fixed value.

I thought that I've made some mistake or that this was cause by the grid card. That wasn't the case. The slider works properly on the web frontend and on Android, both from the grid card and as a card added directly to the dashboard.

This issue can be reproduced with two entities exposed by a xiaomi air purifier, the favorite level and its speaker volume level. I haven't tried to reproduce this with other entities. These were the only sliders in my setup.

Describe the behavior you expected

I expected the slider to be usable as a slider. It is a slider on the web frontend. It's a slider on Android. It's not a slider on iOS.

Steps to reproduce the issue

1. Install the latest Home Assistant & the latest app on iOS
2. Find a number entity which has a slider
3. Add that entity to a dashboard
4. Open the dashboard on the web frontend
5. Open the dashboard on iOS
6. Check if the slider is shown on iOS and on the web frontend, iOS will probably not show the slider properly ...

What version of Home Assistant Core has the issue?

2023.11.1

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Home Assistant Companion 2023.7 for iOS

Which operating system are you using to run this browser?

No response

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

[ildar170975]

Confirm. No slider in iOS Companion App (2023.11.2). iPad Air 2 (iOS 15.x)

Standard slider in more-info: iOS - slider not displayed:

Chrome + Win10 - slider OK:

[gcoan]

I've noticed the same issue on an iPad in the HA companion app.
Appears to affect all input_number slider entities.

Slider works fine on iPhone companion app and Windows 10 Edge browser

[silamon]

We've updated the slider to the material m3 design component. Can you see the sliders on iOS in the interactive demo of material design: https://material-web.dev/components/slider/#interactive-demo?

[gcoan]

I think I’d rather wait until either the core HA component gets fixed or someone overrides the core UI component with a custom fix through HACS (if this is possible). Otherwise I have to start changing dashboards to use custom components and then change back in the future good To know there is a workaround though

[ildar170975]

In this case:

or someone overrides the core UI component with a custom fix through HACS

you will definitely have to do this:

Otherwise I have to start changing dashboards to use custom components

[ildar170975]

@silamon

Can you see the sliders on iOS in the interactive demo of material design

iPad Air 2, iOS 15.x, Safari: I can see sliders:

but cannot operate them - the page is scrolled to left/right instead of moving a knob.

[silamon]

@ildar170975 , that's an image with sliders you screenshotted. There's an interactive demo a little bit lower on the page, but you may need to expand it, before it's loaded.

[thomasloven]

I recharged my Ipad Air 2 from the drawer and attached it to the debugger.

Among many many many other errors, I find that material-web slider seems to rely on attachInternals https://caniuse.com/?search=attachinternals

[ildar170975]

@silamon

There's an interactive demo a little bit lower on the page, but you may need to expand it, before it's loaded.

Here is what I see:

material-web slider seems to rely on attachInternals

Great.

[silamon]

Almost every component in the new material-web uses that attachInternals API. Thanks for debugging. So, next HA release it will expand to more things than just sliders. We might want to add a polyfill, as they mentioned in their browser support... https://github.com/material-components/material-web/blob/main/docs/support.md#browsers

[ildar170975]

add a polyfill

Hope you will find a way to provide a compatibility with "old" devices.

[thomasloven]

I can confirm that the ElementInternals polyfill fixes the problem - at least partially.

Just including it as a dashboard resource (https://unpkg.com/element-internals-polyfill@1.3.9/dist/index.js?module) makes the sliders show up in safari on my ancient macbook (safari 15.6.1). It partially works on my ipad. The handleshows up, but not the bar. Though since it's just a resource that may be caching or timing related issues.

[gcoan]

I added this resource to my dashboard, reloaded the UI and both the standard sliders and the custom-slider-row entity are appearing perfectly on my iPad mini 4 running iOS 15.8

On 12 Nov 2023, at 19:06, Thomas Lovén @.***> wrote:

 I can confirm that the ElementInternals polyfill fixes the problem - at least partially.

Just including it as a dashboard resource @.***/dist/index.js?module) makes the sliders show up in safari on my ancient macbook (safari 15.6.1). It partially works on my ipad. The adjuster knob shows up, but not the slider bar. Though since it's just a resource that may be caching or timing related issues.

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.

[GrizzlyAK]

Among many many many other errors, I find that material-web slider seems to rely on attachInternals https://caniuse.com/?search=attachinternals As you look at this issue, @thomasloven, and in regards to your slider-entity-row, and my use of card-mod to generate hue sliders using them, and the significant changes apparent in this new front end model, do you think it worth trying to "fix" the hue slider (and slider-entity-row), or is it time to give up on such customization? I suspect there are a lot of us still running old iOS devices (iPhone 7, <iOS16 for me). I've reverted to 11.2 in the mean time.

[thomasloven]

This is not the place for this discussion. Catch me on discord or raise an issue in slider-entity-row and I will explain the problem to you.

[GrizzlyAK]

This is not the place for this discussion. Catch me on discord or raise an issue in slider-entity-row and I will explain the problem to you.

Sorry, I pinged you here and here 4 days ago. It just seemed the conversation was happening here. I can wait.

[ildar170975]

It partially works on my ipad. The handleshows up, but not the bar.

What I see after adding the resource:

iPad Air 2, iOS 15.x: The Entities card with a slider is the FIRST on a view: slider is displayed, a state (located to the left) is displayed only before the card is completely resized - i.e. when the card is wider than it becomes after when all cards are shown. More-info - a slider is displayed, a state is displayed. It is rather tricky to move a knob - touching it in most cases is processed like a "magnifier loupe" (never happened with an old slider).

iPhone 5S, iOS 12.x: Same view: only a knob is displayed, a horiz. line is not displayed, a state is not displayed. More-info - same, only a knob is displayed. It is impossible to move a knob.

[randomdecoded]

The dashboard resource fixes the issue for iOS. macOS machines which run the newer Safari version may still have the old webkit for apps. This is meant to be a warning that testing both with the Home Assistant application and Safari is recommended to confirm this works.