Slider handle drags whole screen instead of just the handle for mobile

Hi All-

I’ve designed a slider using the following Axure tutorial: https://www.axure.com/support/training/slider-tutorial

The problem is on mobile, when the handle is touched and dragged, it drags the whole screen left to right, making the slider very hard to use. See my file here: Slider.rp (122.3 KB)

The screen size is at spec for an iphone 6, which is what I am running testing on, so I don’t know why it would do this. The problem is only when I use on mobile.

Thanks in advance

HI chris.mcg12,

I tested your prototype on our iPhone 7 Plus device running iOS 12 in the Axure Share mobile app and in the Safari browser, and wasn’t able to reproduce the same issue where dragging the slider drags the whole screen to the left or right. In case you are talking about the elasticity that is apparent on iOS devices, it’ll help to make sure to only select the “Handle” dynamic panel to perform the drag. One thing that may help with this is to include the viewport tag in your file so that the size of your project appears as it should on your iPhone 6 device. You can enable the viewport tag by navigating to “Publish > Generate HTML Files > Mobile/Device” from Axure RP’s main menu and selecting the “Include Viewport Tag” checkbox.

I’ve also edited your file to demonstrate this. Could you lmk if that helps or changes the behavior at all?

Slider_EDIT.rp (122.4 KB)

Thanks for looking into this. I’m still having the same problem with the file you uploaded though. Take a look at the images to help describe the problem as maybe I’m not explaining clearly:

Is there a way to get this so the entire screen doesn’t move on drag? I’m testing on iphone6, screen width is 375px Wide

Hi chris.mcg12,

Ah! Got it - thanks for the screenshots. I wasn’t seeing the problem because I was testing on our iPhone 7 Plus device, which is a whole 39 pixels wider than the iPhone 6. The main issue is that you’re prototyping for 375px, but your page exceeds these bounds, specifically at 402px, enabling the horizontal scrollbar on your iPhone 6 device.

To resolve the issue, you’ll want to make sure the widgets on your page do not exceed 375px in width. I found it works a lot better if you actually use a width slightly less than 375px, e.g. 370px, which I’ve added as an edit to your file.

The other good news is that your prototype works a lot better in the 9 beta, even at 375px, with the new 9 mobile player, if you wanted to give it a try at www.axure.com/beta. After uploading your prototype to Axure Share, triple-tap on the screen to bring up the player cards and select “Scale to fit width” or “Fit all to screen”. This should ensure that your page does not horizontally scroll on your iPhone 6 device. However, please note that Axure RP 9 is still in its beta phase, so you’ll want to hold off on upgrading any major projects to it until it is out of the beta period.

Please lmk if you have any questions!

Slider_EDIT2.rp (123.2 KB)