Storyline 2: Working with Sliders

Slider interactions makes it easy for your learners to manipulate data, explore cause-and-effect relationships, control objects and navigation, and more. In this tutorial, you'll learn how to add and customize sliders in Articulate Storyline 2.

Practice Activity 1

Download these practice files. Watch the video, then follow the steps below to practice.

In the first part of this exercise, you'll add a slider control to a blank slide and configure it to control the state of a character.

1. Open the 03H_Interactivity_Sliders.story file from the Storyline_Files folder.
2. Insert a new blank slide.
3. Add a slider control to the slide.
4. Use some of the formatting options to change the appearance of your slider.
5. Position the slider towards the bottom of the slide
6. Insert an illustrated character. Size and crop the character so your slide looks similar to the one shown below.

Next, configure the slider properties as shown below.

Finally, create triggers to change the state of the character based on the position of the slider.

1. Add a new trigger to change the state of the character to Angry when the slider equals 1. 
2. Add a trigger to change the state of the character to Neutral when the slider equals 2.
3. Add a trigger to change the state of the character to Happy when the slider equals 3.
4. Preview the slide to see how the slider controls the state of the character.

Practice Activity 2

Next, you'll use a slider to trigger state changes that interactively display phases of the moon.

1. Go to the Moon Phases practice slide in the 03H_Interactivity_Sliders.story file.
2. Select the rectangle shape, go to the States panel, and change the initial state of the moonbox object to 5 (Full Moon).
3. Insert a slider control near the bottom of the slide.
4. Size and format the slider however you'd like.
5. Set the slider properties to:
   • Update: When slider is dragged
   • Start = 1
   • End = 9
   • Initial = 5
   • Step = 1

To complete this activity, you'll need to create triggers that change the state of the image based on the value of the slider variable.

1. Create a trigger to change the state of the moonbox object to 1 when the slider moves and is equal to 1.
2. Practice using copy and paste to create the other eight triggers, one for each of the 9 moonbox object states.
3. Modify each trigger appropriately. For example, change the state to 2 when the slider equals 2, change the state to 3 when the slider equals 3, etc.
4. Preview the slide to see how it works.

Now that you've practiced, try building a few sliders of your own. There are so many ways you can use sliders. Let your imagination lead the way.

If you have questions about sliders or anything else, feel free to ask someone in the community or check out some of the other Storyline tutorials.