Slider interactions make 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.
Download these practice files. Watch this video, then follow the steps below to practice.
Practice Activity 1
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.
- Open the 03H_Interactivity_Sliders.story file from the Storyline_Files folder.
- Insert a new blank slide.
- Add a slider control to the slide.
- Use some of the formatting options to change the appearance of your slider.
- Position the slider toward the bottom of the slide.
- Insert an illustrated character, then 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.
- Add a trigger to change the state of the character to Angry when the slider equals 1.
- Add a trigger to change the state of the character to Neutral when the slider equals 2.
- Add a trigger to change the state of the character to Happy when the slider equals 3.
- 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.
- Go to the Moon Phases practice slide in the 03H_Interactivity_Sliders.story file.
- Select the rectangle shape and go to the States panel. Change the initial state of the moonbox object to 5 (Full Moon).
- Insert a slider control near the bottom of the slide.
- Size and format the slider track and thumb elements however you like.
- 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.
- Create a trigger to change the state of the moonbox object to 1 when the slider moves and is equal to 1.
- Practice using copy and paste to create the other eight triggers, one for each of the 9 moonbox object states.
- 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.
- 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.