Input range width fine in browser but not on Android

This is the markup:

<input style="width: 100%" type="range" max="9" min="1" ng-model="numOfPeople.number" ng-change="valueChanged()">

It works in local Chrome but on Android when I touch it the line disappears and little ball goes all the way to the left.

I’ve also tried all the recommendations here: Range Slider Not Visible on Android JellyBean

But it still disappears. What else can I try?


I tried your markup and just like your description about the problem I experienced it also.

I then remove your inline style, style=“width: 100%”, and it solves the problem tested on Android 4.2.2