Use a slider as progressbar
Jul 03, 2019
By
Chris Dorna
With the newe Built-In variables (see also https://community.articulate.com/discussions/articulate-storyline/new-in-storyline-360-slide-numbers?page=3#reply-610329) it is much easier to use a slider as a progressbar.
How does it work?
- Place a slider on the masterslide;
- Replace the thumb fill with an image of a rectangle;
- Make the slider track transparent;
- Mask parts of the screen with rectangles of png-images (preferable);
- Use the Scene.SlideNumber variable to move the thumb of the slider.
You can see different examples in this project. In the first three examples you must adjust the slider properties when the number of slides in a scene changes. The last example is a generic solution for 1 - 100 slides in a scene and needs some calculation (explained in the example).
- On my site (in Dutch): http://www.dorna.nl/progressbar-with-slider/ (with a link to the .story file)
- Only the project: http://www.dorna.nl/sl/progressbar_with_slider/story.html
- On Articulate Review: https://360.articulate.com/review/content/fbf2e99b-a096-45f4-a996-758c152a0e32/review
3 Replies
Thanks for sharing.
Allison did a similar demo, I think she used the course progress variable for hers.
Thanks Chris! I was able to apply your design to my problem (mood meter of an intern) and it works perfectly now.
Love this community !
Hi Céline,
Thanks for your compliment, these things keeps me motivated to post on this comminity!
This discussion is closed. You can start a new discussion or contact Articulate Support.