On the following code I have the
Ionic 4 component:
<!DOCTYPE html> <html dir="ltr" lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>index-ionic.html</title> <script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script> </head> <body> <ion-range mode="ios" min="0" max="120" pin="true" value="60"></ion-range> </body> </html>
In desktop browsers it is fine. Also, on Android browsers it is fine.
IPhone (real device) browser (for example:
Chrome), when you press the handler, there is one gray square that shows up as you can see on the following image:
I want to prevent that because it doesn’t look good.
In the other hand, if you go to this demo:
and press the handlers you don’t get that gray square.
Any idea on how to prevent this?