Use interactive sliders in Storyline to manipulate data, explore cause-and-effect relationships, and control other objects. Learners won’t be able to resist slider interactions.

Watch this video overview, then follow the activities below to practice.

Practice Activities:

  1. Add and Format a Slider
  2. Set the Slider’s Properties
  3. Use the Slider to Control the States of a Character
  4. Preview Your Interaction

Practice Activity: Add and Format a Slider

First, we’ll add a slider to a Storyline project and format it. Watch this demo, then follow the steps below to practice.

  1. Create a new Storyline project and double-click the default blank slide to open it in Slide View.
  2. Go to the Insert tab on the ribbon, click Slider, and choose a slider type.
  3. Then click the slide where you want the slider to appear. As we move through this tutorial, you can resize the slider or move it to a new location as necessary to fit your interaction. Use the yellow and white sizing handles to resize the track, thumb, or the entire slider.

  4. Use the Format tab on the ribbon to style the slider as you like, including thumb style, track style, colors, and effects.

Practice Activity: Set the Slider’s Properties

Now we need to set the slider’s properties to control how it behaves.

  1. Select your slider and go to the Slider Tools—Design tab on the ribbon.
  2. Set the Start value to 1.
  3. Set the End value to 3.
  4. Set the Initial value to 2 so the slider thumb will default to the middle of the slider track.
  5. Leave the Step value at 1. (The step value controls how big the jump is between each stop along the slider track.)

Practice Activity: Use the Slider to Control the States of a Character

Now let’s add an illustrated character to the slide and use the slider to control the states (or expressions) of the character.

  1. Go to the Insert tab on the ribbon and click Character.
  2. When the character browser opens, choose an illustrated character. (Storyline 3 doesn't include modern illustrated characters. If you want access to our expanding library of more than 100,000 combinations of characters, expressions, and poses, check out Articulate 360. It includes our ever-expanding Content Library and the latest version of Storyline.)
  3. When you find the character you want to use, select an expression and a pose, then click Insert.
  4. Crop the character to the torso, then resize it as necessary and place it in the middle of the slide above your slider.

We’ll create three triggers to control the state (or expression) of the character, one for each stop along the slider’s track.

  1. Click the Create a new trigger button in the Triggers panel, then use the trigger wizard to assign these values to your trigger and click OK.
    • Action: Change state of
    • On Object: Character 1
    • To State: Angry
    • When: Slider moves
    • Slider: Slider 1
    • Condition: == Equal to 1
  2. Click the Create a new trigger button in the Triggers panel again, then use the trigger wizard to assign these values and click OK.
    • Action: Change state of
    • On Object: Character 1
    • To State: Neutral
    • When: Slider moves
    • Slider: Slider 1
    • Condition: == Equal to 2
  3. Click the Create a new trigger button in the Triggers panel again, then use the trigger wizard to assign these values and click OK.
    • Action: Change state of
    • On Object: Character 1
    • To State: Happy
    • When: Slider moves
    • Slider: Slider 1
    • Condition: == Equal to 3

Practice Activity: Preview Your Interaction

Click the Preview drop-down arrow on the ribbon and choose This Slide to test your slider interaction. Imagine the possibilities.

Want to try another slider interaction? Watch the two video demonstrations below, then use the 03H_Interactivity_Sliders_360.story project in your practice files to build a moon phase slider.

  1. Part One
  2. Part Two

Summary

In this tutorial, you learned how to create an engaging slider interaction. To learn more about sliders, see the Storyline 360 and Storyline 3 user guides.

In the next tutorial, we’ll create a dial interaction.