• Blog
  • Meet Our Trainers
  • Training Schedule
  • Contact
  • Privacy

As heard in training...

How Can I Make a Slider More Engaging?

September 27, 2019   Yukon Learning    2 Comments

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.

Customize Sliders with The Articulate Trainer TM

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.

Resize the Slider thumb with the top yellow handle, and resize the track via the side yellow handle.

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

Resize the entire Slider as a whole with 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.

The eyedropper allows you to hover over any color to use that RGB value.

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.

To use an image as the thumb, select Picture under Thumb Fill.

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.

To remove the border from a Slider thumb, select No Outline under Thumb Border.

(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.)

Right click a shape or group of shapes to export as an image.

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.

Trigger: Show layer 1 when Slider moves equal to 1

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.

In Layer Properties, deselect “Hide other slider layers” 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.

Trigger: Hide layer 1 when Slider moves equal to 0

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.

Trigger: Adjust variable Slider1 to equal an assignment of a value of 0 when the timeline starts on this slide

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.

Comments

  1. jennifer baldwin says

    October 23, 2022 at 12:10 am

    I built this, thanks! However, I don’t want all layers to show at once. So that made the slider disappear. as soon as i move it (I selected “hide objects on base layer”…what is the solution?

    Reply
    • Yukon Learning says

      October 23, 2022 at 10:46 am

      Hi Jennifer! Happy to help – we’ll contact you directly so we can help and view your file as needed. Thanks!

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

     

Join  

Enter your name and email  below to instantly subscribe to The Articulate Trainer blog:

 
 
 

We take your privacy seriously. No spam ever.

  • Home
  • Blog
  • Meet Our Trainers
  • Training Schedule
  • Contact
  • Privacy

Copyright © 2023 The Articulate Trainer

Articulate, Articulate Storyline, and Articulate 360 are the trademarks or registered trademarks of Articulate Global, Inc.
Yukon Learning and Making E-Learning Easy for Everyone are the trademarks or registered trademarks of Yukon Group, Inc.