<input type=“range” /> not working on iOS

Question

I've created a very basic lightning component:

<aura:component implements="flexipage:availableForAllPageTypes">
    <input type="range" min="0" max="100" value="50" />
</aura:component>

This appears to be working perfectly:

• In Firefox, Chrome and Safari (on both mobile and PC) via /one/one.app as well as /namespace/sf1app.app

Working on touch, but not drag-and-slide:

• Inside the SF1 app on Android

Not working at all:

• Inside the SF1 app on iOS

This documentation says that there is a ui:inputRange component, but when I try to add it in a component I get the following error:

Failed to save undefined: No COMPONENT named inputRange found: Source

Then I referred to the aura documentation at https://<INSTANCE>.lightning.force.com/auradocs/reference.app which doesn't have inputRange listed.

UPDATE: I found the answer

Question(s):

Has anyone created a slider in a lightning component that works on iOS too? Is it a SF1 app limitation that doesn't support all HTML5 components?

Answer 1

Here is the source for ui:inputRange in the Aura open source project.

This is a feature that exists in the open source framework, but does not appear to be surfaced on the platform implementation of aura that is Lightning Component Framework (LCF).

The Winter 16 release saw Lightning Components go GA. If you look at the ui:inputText component, you can see that this has an attribute set as access="global" this is the flag for what has been implemented in the platform and been made available to Salesforce developers to build with.

During the developer preview and beta over the past year there were a number of components that had been surfaced in the LCF project. For GA, a few of these were removed. I suspect that ui:inputRange was one of these.

More and more should be surfaced in the future. I would suggest Idea Exchange to begin raising the profile of some of the components that you'd like to see move from open source to LCF. You can also browse the project for what is availble by accessing the open source docs, or browsing the components source.