Storyline 2 Slider not working in HTML5 Output

Feb 20, 2015

Hello Everyone,

I was wondering if anyone else faced a problem with the new slider interactive element in Storyline 2. 

It doesn't seem to work on Safari and Chrome when its running in html5 mode. It just doesn't drag at all. Same with iPad Safari browser when run in html5 mode. The articulate mobile player on iPad seems to be fine.

It also works fine if the flash plugin is available for the browser in the flash mode. Anyone else faced this issue before?  Any suggestions?

53 Replies
Hollie White

I am also having this issue. I have created sliders and published for HTML5 output. I opened the course on my iPad in Safari and the slider thumb does not slide. When I try to slide, the whole interface moves on screen.

Is anyone else having this problem with sliders working on the iPad in Safari when viewing the HTML5 output?

Ashley Terwilliger-Pollard

Hi Hollie, 

I haven't seen this behavior with a number of slider examples I've viewed on my iPad in Safari with iOS8.3. I just tested that one too, and grabbing it at first moved the screen but I couldn't tell if it was just grabbed in the wrong location as after that it worked every time I tried. What iOS are you using? 

Hollie White

I figured out the problem (I was having) and luckily a solution to it as well. For my slider thumb, I created a PNG rectangle with a clear inside (so it looked like a border). The transparency in the box created the issue when trying to slide on the iPad because it only allowed you to grab the actual visible part of the image, not the transparent part. 

Solution: Create a fill of 1% to the box. You can't see it, but it's recognized as being there.

J F

I'm having this issue as well on iphone/ipad and it seems that the number of states and limited screen real estate may have an impact - at least in my case. If this is true, I hope the Storyline team provides a fix for the issue. Here are two examples: 

1) This is the original. I used a small transparent slider. http://aheta.org/virtual_3cc_syringe/story.html

2) This is the test file I created based on the responses I have read so far. I increased the slider area, thumb button and track, and used a solid fill.  After swiping numerous times on the slider, I noticed some movement. http://aheta.org/3cc_tester/story.html

The fact that it moved at all led me to believe that a high number of states (I used 30) assigned to a small slider area (thumb/track) may be the main cause of my issue.

If anyone has suggestions/comments, please share. Thanks!

Nathan Hartwick

I thought I was having a similar problem with a slider I created that has 25 steps. I was testing in Firefox (35.0.1) and the slider button would not budge. So I tested it in Chrome (43.0.2357.132 (64-bit)), Opera (30.0.1835.88), Safari (8.0.6), and IE (9.0.24237.1028877) on a Mac and it worked exactly like the flash version. I took the time to look at the html5 versions of the two projects attached to this discussion, 54 Faces and Syringe, and found that 54 faces worked in the other browsers, as well, just not FF. Syringe was buggy, big square slider would work only slightly and only if it was grabbed in the "sweet spot", or did not work, the transparent square did not work in any browser. I'm updating FF to version 39 and will follow-up with my findings.

Jessica P

Hi,

I am having a similar issue. When I preview my course the slider works fine, but when I publish it as HTML I run in to trouble. When I first get to the page with the slider on it, it won't slide at all, if I then click the back button and then the next button to get back onto the slider page it will then work. 

I have tried playing around with the slide properties (advances options), I tried changing the setting from 'Reset to initial state' to 'Resume saved state' and 'Automatically decide', but then the slider won't work full stop.

Any help greatly appreciated=)

Leslie McKerchie

Would you be able to share privately here? An NDA can be signed if needed as well.

If not, can you re-create the issue in a new file or is this just happening in this file?

If you are able to re-create in a new, generic file, perhaps we could take a look at that. If you are unable to replicate, you may want to consider importing your course into a new file.

Please be sure that you are always working locally on both your software and project files.

Ashley Terwilliger-Pollard

Hi Roberto, 

I just tested a really basic slider with a entrance animation and I could view the HTML5 output in Google Chrome and my iPad running iOS 9.0.2 in Safari. Both of them worked normally. If you'd like to see my super basic example here - let me know if that works for you. If you've got a file that isn't working, could you share it here so that we could take a look. 

Jean-Charles Lamathe

Hi all.

I confirm that sliders can't work in HTML5 export if there are :

an entrance animation AND a positionning of the slider (rotation or rescaling).

A bit weird, but confirmed in 2 different modules.

 

A solution i've found is :

  1. Reset the state of the slider
  2. Apply your entrance animation
  3. Apply your rotation or scaling changes

 

This discussion is closed. You can start a new discussion or contact Articulate Support.