The Articulate Storyline Slider Challenge 52- Double Slider Action!


Storyline 2 sliders

Storyline 2 sliders that respond to each other

Click here to see double slider demo

The Articulate Storyline Challenge 52 was to use the new interactive sliders from Storyline 2. For the last four years I have wanted to create an elearning interaction where the learner can slide two elements up and down the page that respond to each other on the page. The higher one goes, the lower the other and vice versa. Until now, I didn’t have the software to do this. Storyline 2 has solved my problem!

The Idea

In our classroom course called “Introduction to Paint” course there is a section where the trainer moves bottles around on a grid to demonstrate how adjusting the relative proportions of pigment and binder changes the properties of the paint. What I wanted to do was design a learning experience where users could manipulate the elements themselves and get instant feedback on what the result was.

Visual Design

02flatdesignjarsI decided to go with a very flat design for the jars. I found this image on The jars at each end inspired my design in shape and colour. Working with one of the paint experts in the business to ensure that the colours were right, I created a whole range of paint ingredients using PowerPoint in tall jars.  After trying these out on the slider, I realised I needed to create some small square jars.  I decided to have a dark grey background to suggest a factory setting with the contrast of the paint ingredients having vibrant colours.  I think they look like a delicious sweetie shop all lined up!

Design Slider Steps

I created a new project in Storyline and inserted three sliders, using the thinnest track and turned them on their sides. I used the images of the smallest jars as the slider thumb.
Tip! If you are rotating your sliders, you will have to rotate your image before saving it, so it displays as upright on the slider.   03slider-thumb

I set the sliders to have 5 stops and the thumb initial position at 3 (in the middle).04slider-settings01

Then came the fun part of setting the values.

The Pigment slider is “Slider1” and the Binder slider is “Slider2”. I set the sliders so that when Slider 1 was equal to 1, then slider 2 was equal to 5 and worked through the list. You have to pay attention when doing this, it’s a little fiddly! 05slider-settings02


This is what it looks like inside the Trigger Wizard  I then created my layers. 06trigger-wizard


To help me remember which one was relevant to which slider position I named each layer as Pigment=1 etc. I then set new triggers so that the correct layer showed when slider 1 was in the relevant position.  Because slider 1 and slider 2 interact it doesn’t matter whether the learner drags slider 1 to position 1, or drags slider 2 to position 5.  Either of those actions will show the Pigment=1 layer. 07layer-triggers


I added a solvent slider but covered it up with a transparent box so that people don’t use it. The levels of solvent are not relevant to this interaction but learners need to be aware that there is a third ingredient.

And Hey Presto! Sliders that respond to the settings on each other. The learner can explore for themselves the results of adjusting different levels of ingredients. I am so happy to have solved this issue!


But that’s not all

I then wanted to explore using the sliders for a quiz which you can see on page 4 of the demo.  I duplicated slide 3 and took off the previous triggers that made the sliders interact with each other. I added a new Variable “VariablePB” which is a number variable with a default value of 0.


I created my “That’s right” and “That’s wrong” layers and set my triggers, which you can see below. When the 2 sliders are at the correct position, VariablePB changes to 1. When the user hits the submit button, if VariableBP is still 0, they get the “That’s wrong” layer. If VariableBP is 1 they get the “That’s right” layer. 10variable-triggers


On the that’s wrong layer I added a sad face, and put a translucent box over the sliders so it was clear they were greyed out and they needed to click the “try again” button which hid the “That’s wrong” layer. It would be easy to duplicate this question and set the VariableBP to change to 1 at different slider settings so that you could have a whole quiz of asking learners to make different ingredients.

So have a look at the demo!

  Click here to see double slider demo

I would love to get your feedback.  This is my first Articulate Challenge write up. so please let me know if this tutorial was helpful to you and if you can think of a way to use Articulate Storyline 2 sliders in this way.