How Can I Make a Slider More Engaging?

Our latest blog entry demonstrated how to customize a Dial and make it more engaging. Now, in the second half of this two-part series, let’s dial back the clock in honor of #FlashbackFriday to the original Storyline interaction of this type: Sliders.

At Yukon Learning, we’re always finding new ways to utilize the Slider interaction, allowing learners to drag a handle up and down a track in order to uncover content, or trigger actions to occur. They’re fast and easy to develop, and make learning entertaining. However, since the Slider has been around for several versions of Storyline, the question arises in many of our trainings: “How can I make my Slider stand out?” Or, perhaps it’s a matter of making this fantastic widget suit your specific branding guidelines. Today, we’ll walk through several ways to tailor a Slider so that it’s completely unique from the myriad of Sliders that came before it.

Great news: Sliders and Dials meet accessibility guidelines, as they can be operated by arrow keys.

The Look

1) First, to insert a Slider, open the Insert tab, choose a Slider design as your starting point, and click onto the slide. Then, you can rotate it by dragging the rotation symbol, or pick up the Slider and move it to a new location.

2) Resize the draggable Slider “thumb” with the top yellow handle, and resize the Slider “track” via the side yellow handle.

3) You can also resize the entire Slider as a whole by using the white handles.

4) With the Slider selected, make color choices on the Slider Tools | Format tab for both the thumb as well as the track.

(Option: At Yukon Learning, we often create an invisible track, in which the thumb appears as if it’s floating on its own. Pull this off by selecting both “No Fill” in the “Track Fill” drop-down as well as “No Outline” under the “Track Border” drop-down.)

5) The Eyedropper tool within your fill and border options should not be overlooked! This will allow you to hover over any color (be it a color on your website, or the within a style guide, for example) to apply the RGB color values to your Slider.

6) For something entirely one-of-a-kind, we use an image fill on the thumb handle, like the colored pencil in our sketchpad example here. To do so, select the Slider Tools | Format tab, the Thumb Fill drop-down, and “Picture…” to upload a photo from your files.

Tip: If you’ve elected to use a picture for the thumb fill, you’ll most likely want to remove the leftover border, by choosing “No Outline” in the Thumb Border drop-down.

(Option: To use a shape, or custom group of shapes as the fill for the thumb, right-click your custom graphic and export it as an image first. Now you can choose this image as the thumb’s picture fill.)

Operations

Similar to a Dial, Slider mechanics are based in number variables. On the Slider Tools | Design tab, you’ll designate start, end, and initial positions for the thumb, and how many increments the Slider moves via the “Step” field.

In our pencil example, we have five layers and a starting position. So, the only adjustment we made to our file was changing the end value to “5” in order to have six total stops: 0 through 5.

For more information on how to adjust the Slider’s functionality, check out this video from Articulate.

Show Me the Content

Now that your Slider has your desired look and feel, it’s time to teach the material.

In part one of this series on customizing Dials and Sliders, we revealed content through layers as the Dial turned. In order to provide a sense of the similarities and differences between Sliders and Dials, we’ve used the “Show layer” method once again, only this time with a Slider. Download our Storyline 360 Slider file here to take a peek at the inner-workings.

Slider triggers are dependent on a number variable.

 

By default, layers only show one at a time. For this particular Slider activity, we wanted the layers to show all at once. In your Layer Properties (accessed by the gear icon in the Layers panel, while a layer is selected), deselect the “Hide other slide layers” setting in order to reveal multiple layers simultaneously.

Finally, so the layers would disappear as the Slider returns to the starting position, we’ve also added “Hide layer” triggers that will execute as the Slider moves backwards, as seen below.

Each layer hides when the Slider moves back to the numbered stop just before it.

 

Tip: If your learners are able to leave and revisit this slide, remember to initialize the variable of a Slider (or a Dial) back to its starting value. That way, the Slider thumb won’t be left pointing at the wrong item when the slide restarts.

Every Slider’s variable should reset to its initial value upon a revisit.

 

We hope that this blog series provides you with new avenues in your current and future projects.

Looking for an even more dynamic Slider interaction? #Flashback to my blog post on creating a thumb that changes as it moves along the Slider track!

As always, feel free to leave a comment below with questions, thoughts, or new ideas.

Let’s slide into e-Learning…

~ Stefanie

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.