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?
Unfortunately I am not seeing this issue on my end. Sliders are working in HTML5 on desktop and on my iPad. Please make sure you are testing these published files from their intended environment.
You could also share the file here if you would like us to take a look.
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?
I wanted to see if other sliders that I didn't create worked to see if it was just me and I tried opening this example from a past challenge and it also does not work on the iPad.
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?
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.
Thanks to both of you for the update - with transparent items, I typically set them to 1% just to ensure that there is some "fill" amount to allow all elements of the image/box to be something that can be clicked.
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:
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!
Thanks for sharing your examples here (they look great!) and I saw that while testing the HTML5 output in my desktop Chrome browser I'm not able to drag the slider as you mentioned - I'm curious if you're able to share your .story file with us here?
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.
It has more to do with how each browser handles HTML5 output and all the functionalities of Storyline or Studio. A great site to see how different browsers compared is HTML5test.com and that type of data is what lead our team to choose Chrome on a PC and Safari on a Mac.
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.
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.
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.
Do you have a sample of the one you set up with the slider rotated and an animation applied? I'd like to take a look at it and then see if I can recreate the same thing to share with our QA team for additional review and investigation.
53 Replies
Hello Syed,
Unfortunately I am not seeing this issue on my end. Sliders are working in HTML5 on desktop and on my iPad. Please make sure you are testing these published files from their intended environment.
You could also share the file here if you would like us to take a look.
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?
I wanted to see if other sliders that I didn't create worked to see if it was just me and I tried opening this example from a past challenge and it also does not work on the iPad.
http://www.jackievannice.com/challenge_54_faces/story.html
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?
Guys I think I found the problem with this. I had the same problem but on a hunch, I just made the slider tab much bigger and bingo it worked.
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.
Thanks to both of you for the update - with transparent items, I typically set them to 1% just to ensure that there is some "fill" amount to allow all elements of the image/box to be something that can be clicked.
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!
Hi Joshua,
Thanks for sharing your examples here (they look great!) and I saw that while testing the HTML5 output in my desktop Chrome browser I'm not able to drag the slider as you mentioned - I'm curious if you're able to share your .story file with us here?
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.
Update: FF version 39 did not help. Still can't grab or move that slider button no matter how big I make the thing.
Hi Nathan,
I did want to clarify that our HTML5 output is not supported in Firefox. You can see the supported browsers outlined here.
I read that shortly after writing my update post. Is cross-browser support for html5 something that Articulate is working toward for Storyline?
Hi Nathan,
It has more to do with how each browser handles HTML5 output and all the functionalities of Storyline or Studio. A great site to see how different browsers compared is HTML5test.com and that type of data is what lead our team to choose Chrome on a PC and Safari on a Mac.
Hope that helps!
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=)
Hi Jessica! Would you be able to share your .story file for someone to take a look at?
Hi Leslie,
Thanks for your reply, unfortunately I can't provide the file as it is a corporate project.
Thanks
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.
I eventually worked it out, through a process of elimination. I had an animation on the slider, as soon as I removed that it works fine.
Thanks Jessica for the update and I'm glad you were able to figure it out.
Hi, I confirm that sliders doesn't work in HTML5 if there are animations on them.
I hope in a SL2 update soon.
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.
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 :
Hi Jean-Charles,
Do you have a sample of the one you set up with the slider rotated and an animation applied? I'd like to take a look at it and then see if I can recreate the same thing to share with our QA team for additional review and investigation.
There is confidentiality issue with this module.
I can't share this one.publicly.
I can maybe send you just one screen through e-mail, but nothing more.
This discussion is closed. You can start a new discussion or contact Articulate Support.