How Can I Use a Slider as a Progress Meter?

Many developers find themselves in need of a progress meter to show a learner how much is left to be completed in an e-Learning module. There are several ways to achieve this in your course.  A slider is a great visual for the learner to see how much is left in the course. The slider also has built-in points, keeping us from having to do any leg work. Let’s explore this “as heard in training” question and use a slider as a progress meter!

NEW! As of 2019, an Articulate-360-exclusive slide number feature is now the most streamlined way to allow learners to track their progress through Storyline 360 e-Learning! Storyline 360 handles the calculations so that you can focus on development, and we encourage you to check it out in our blog post here. Developers using Storyline 3, carry on and follow the steps listed below!

First thing’s first…

Create a Slider

In a new .story file, add a slider to the Slide Master on the parent slide.

Tip: Don’t forget to rename the slider and its corresponding variable. In our example, which you can download here, the variable is named “SlideCount.”

You can easily customize the look of your slider by using the Format option under the Slider heading. In our example file, we removed the track and filled the thumb with a picture. We used lines to create a meter behind the slider.

Next, go to Slider Tools | Design and adjust the slider’s End setting to the total number of slides you will have in your course (once you know that number).

Add a hotspot over top of the slider to keep the learner from dragging the slider manually.

Tip: Right-click on the hotspot and uncheck Show Hand Cursor on Hover to keep the hand cursor to appear when the user mouses over the slider.

Create Slide Variables and Triggers

The next step is to create a True/False variable with the default value of False for each slide. If you have developed a storyboard for your course, you should be able to do this at the beginning, since you know how many slides you will have. However, if you are unsure about the number of slides you’ll end up with, this is something that you may choose to go back and finalize upon course completion (same with the slider’s End setting).

Now we need to add triggers! Remember…nothing happens without a trigger. Close out of the Slide Master. Now, on the first slide of your course, add the following triggers:

1.  Trigger the slider’s variable to add 1 IF the slide number variable is equal to the value of FALSE when the timeline starts on the slide (this means a condition is needed). By default, when a learner moves the slider, it adjusts its variable. The opposite is also the case! If you adjust the variable (like we’re doing here), it will adjust the slider.  
2. Trigger the variable to adjust to the value of True when the timeline starts on the slide. 

Tip: Trigger order is extremely important here!  The slider’s adjustment trigger MUST come before the slide count variable trigger.

Duplicate Slides or Copy/Paste Triggers

Now you can easily either duplicate the slide and adjust the triggers to match the slide number or, if you’re adding this as a final step and the slides are already in place, you can copy/paste and then edit the triggers. Click here to see our example in action.

Summary

This is just one way to make a progress meter in Storyline 360, and a simple method if you want to harness the built-in functionality of a slider! How do you create progress meters? Do you utilize sliders in other creative ways? Let us know in the comments below!

Happy Developing!

~Katie

Update: Please note that the interface of the faster new trigger workflow (in Storyline 360 update 3.33.20625.0 or later) will appear slightly different! While the process is the same, this article uses screen captures from the classic trigger workflow.