Currently trying to port my ios/android app to Windows 10 universal and ionic has adapted incredibly well. I have one blocker left that I just can’t find an answer to and it is fixing the display and handling of the range slider.
I have a range slider as in the attached screen cap. It updates correctly and the position moves as the audio plays no problem there. But for some reason there is a second grey line not attached to the range slider and I can’t figure out why or what to change to get rid of it. It looks like once that is gone the slider will go back to it’s normal position, it’s currently pushed down slightly by this extra line.
The second problem that i have is I can use the touch screen on my surface pro to drag the range slider and that works perfectly but I cannot click and drag the slider with the mouse. Mouse based navigation works perfectly everywhere else, just this one case where it doesn’t register. I presume because you have to click and hold to drag the slider it is registering a different type of click / touch event but I’m not sure how to catch or fix this. Having working mouse interaction is kind of important on a windows notebook or tablet as you don’t always want to touch the screen or might be using an external monitor.
Greatly appreciate any help on this one. Really looking forward to getting my first app into the Windows store using ionic!
If there is any other info I can get for you or anything to test let me know.
This post has a solution for making the slider draggable with the mouse. Similar to the collection-repeat fix for windows it has to be applied within the ionic.bundle.js which isn’t ideal as it will get over written if you update ionic. Hopefully a few of these windows platform fixes can be incorporated into a future ionic version.
Problem now is just the styling of the range slider and why it has that extra background bar!
Hi @ghenry22, i hope you are well i’m having problems with the input type=“range” on Windows App (8.1).
You find a way to make the input range work properly?
Do you have ion-content and an input text in the same page? Because with this two element a have big problems when i use the touch screen of my surface pro.
I then had to adjust the position of the range element up a bit compared to other platforms but aside from that it now works consistently with all ios and android and looks nice too!
I did disable “swipe to go back” for my project as I found myself accidentally swiping back in the app when I didn’t mean to and for any non-iOS platform that interaction is non standard anyway so even more confusing. Sometimes I was swiping back when trying to slide the range for example.
update: as mentioned in the slack channel there are many platform-windowsphone fixes in place in the ionic library. These should probably all be updated to also catch platform-windows as the new windows platform also uses IE to render the webview and has many of the same quirks but they don’t get caught by default.
