Authors

Video Tutorials

Storyline 360: Working with Sliders

Use interactive sliders to let learners manipulate data, explore cause-and-effect relationships, and control other objects in the course.

Adding Sliders

Go to the Insert tab on the ribbon, click Slider, choose a slider type, and click the slide where you want the slider to appear.

Tip: By default, sliders are horizontal, but you can make them vertical if you'd like. Just rotate them 90 degrees. You can use the rotation handle at the top of the slider or the Rotate drop-down on the ribbon.

Resizing Sliders

Sliders have a track and a thumb that slides along the track.

The track and thumb can be resized together or individually.

  • To resize the whole slider (track and thumb), drag a corner sizing handle.
  • To change the length of the track, drag the left or right sizing handle.
  • To change the thickness of the track, drag the left yellow handle up or down.
  • To resize the slider thumb, drag the top yellow handle up or down.

Setting Slider Properties

To control the behavior of a slider, select the slider, go to the Slider Tools—Design tab on the ribbon, and adjust the following properties.

Variable

This is the variable associated with your slider. Storyline 360 automatically creates a number variable for each slider in your course.

If you want to change the variable that's controlled by a slider, use this drop-down to select another number variable in your course.

Learn more about variables.

Update

This controls when the variable gets updated. You can update the variable as the learner is dragging the slider (which is the default setting) or only after the learner releases it.

Start

This is the starting value for your slider. It defaults to zero, but it can be any number between -9999 and 9999. (It can also have up to two decimal places.)

End

This is the ending value for your slider. It defaults to 10, but it can be any number between -9999 and 9999. (It can also have up to two decimal places.)

Initial

This is the starting position for the slider thumb. It defaults to zero, but it can be any number between your starting and ending values. (It can have up to two decimal places.)

Step

This is the incremental value for the slider thumb as it moves along its track. It defaults to one. (It can have up to two decimal places.)

Renaming Sliders

Storyline 360 gives each slider a default name: Slider 1, Slider 2, etc. We recommend giving them more intuitive names, so they're recognizable when adding triggers and creating freeform interactions.

One way to rename a slider is to right-click it, select Rename, enter a new name, and click OK.

Another way is to double-click the slider in the timeline to open it for editing, enter a new name, and press Enter on your keyboard.

Formatting Sliders

To change the styles, colors, and effects for a slider, select the slider, go to the Slider Tools—Format tab on the ribbon, and use the formatting options.

The colors available on the Format tab come from your theme colors.

Triggering Actions

Generally, you'll want to perform one or more actions based on a learner's interaction with the slider. To do that, you'll need to add triggers that execute when the slider moves or the variable changes.

For example, you might change the state of an object when the learner drags the slider.

Displaying Slider Values in Text Elements

There may be times when you want to display the value of a slider in a text box or shape. It’s easy to do. Just add a variable reference to any text element in your course.

When the learner drags the slider, the value that's displayed in the text element automatically updates to show the value they selected.

Deleting Sliders

To delete a slider, select it on the slide or in the timeline, then click Delete on your keyboard.

Understanding Slider Accessibility

Sliders are accessible. If you include media, ensure images have alternative text (alt text) and videos have closed captions and transcripts. Test your slider's screen reader and keyboard navigation accessibility. For further guidance on creating accessible content, refer to these accessibility design tips:

For testers and learners, accessible navigation is built right into sliders:

Screen Reader Users

Keyboard-Only Users

In Focus mode, screen reader users can interact with the slider thumb and move it using the arrow keys.

Tip: If your arrow keys won't move the slider thumb, press the spacebar or Enter key to switch to Focus mode.

Content in states or layers along the slider track isn’t announced when the screen reader is in Focus mode. To announce the content, screen reader users must switch to Browse mode by pressing the Esc key, then use the arrow keys.

Keyboard-only users press Tab/Shift+Tab to access the slider thumb and use the arrow keys to move it along the track.
Published 9 years ago
Version 1.0
Articulate 360
storyline 360
Tutorial
User Guide