At the end of our Articulate Storyline Advanced Day of training, we teach a feature called Sliders. It’s such a great feature to end the day with because sliders are so slick and easy to use, and “out of the box” look absolutely beautiful! However, people usually want more, right? Quite often, we’re asked, “Can I change the thumb on the slider?” or better yet, “Can I change the thumb on the slider when it moves along the track?”
In this blog entry, we’ll describe how to adjust the visuals on your “out of the box” slider, and you’ll even get an opportunity to grab the Storyline source file too!
Create a Slider
You’ll start with a basic slider found under Insert | Controls | Sliders.
Any of these sliders will work just fine. Since we’re going to change what the entire thing looks like anyway, any of the sliders will do.
In case you weren’t aware, sliders use the functionality of variables: number variables to be exact. By default, as you move the slider, it increases or decreases that number, depending on the “Step” property assigned.
By default, the slider has 11 positions. However, this can be changed in the Slider Tools | Design tab. For this example, I used 6 total positions, setting the Start to 0 and End to 5.
The slider itself has two pieces: a Thumb and a Track.
Both of these objects can be adjusted on the Slider Tools | Format tab.
You might notice that you can adjust the Thumb Fill and Track Fill with a different color…or with a picture or texture! For this example, I used a .PNG picture file as my thumb, so I also removed the Thumb Border.
A slider can do tons of different things. Whatever you want your slider’s reality to be, just create it! It might be showing a layer, changing the state of something on the slide, calculating a different value–it’s really up to you! In my example, I created a layer for each position of the slider.
Tip: Create your first layer or state how you want it, then duplicate it for more rapid e-Learning development!
Layers are great, but remember, the learner will never see the layer without a trigger. Here’s the trigger I used for the slider to show a layer at each position:
Keep in mind you’ll need a trigger for each layer and possibly a trigger to start the slide with a layer already showing.
Tip: Duplicate your triggers and change the value of each for a more rapid e-Learning development.
Changing the States of the Slider
What if we want the slider itself to change to the new icon as the slider is moving? That is a state change…of the slider itself! That’s right, sliders can have states too!
Then it’s a matter of triggering the state change of the slider, just like we triggered to show the layer.
Tip: Don’t forget to change the slider back to Normal if the slider goes all the way back to zero!
Take a look at the finished product HERE.
Download a copy of the source file to reverse engineer it HERE.
If you love sliders but are hoping for a completely different look and feel, look no further than your own imagination! Instead of focusing on what you believe might be a limitation, explore! Think outside the box!
As a great Jedi once said, “Your focus determines your reality.” ~Qui-Gon Jinn
Interested in learning even more about sliders? Check out this earlier blog entry about using sliders with motion paths.