In the final portion of our hands-on Advanced Storyline 360 training, we end the session with some fun, easy, and favorite features of mine: sliders and dials! During this segment, we task the students with creating a fairly simple interaction that we use often: showing a timeline of events. In that exercise, the slider has eight stops, and the stops are equal distance apart.
When teaching this, however, we’re often asked, “What if I need my slider to stop at points that aren’t equal distance apart?”
While there are varying methods, let’s explore a timeline example we’ve put together with uneven spacing, and unravel the process we used for our blog today. (We used some history of photography as our placeholder content.)
Building the Slider
The start of our timeline for the history of photography is the year 1826 and the end of our timeline is the year 1992. There are 166 years between the start and the end. So, after inserting the slider and formatting it, we changed our Slider Properties so its End point is 166.
Spacing the Labels
In the Slider Properties section, we’ll temporarily adjust the Initial value to match the next stop along the track. Simple! In our history of photography example, we adjusted the Initial value to 13, since 13 is the number of years between 1826 and the next stop: 1839.
As you change the Initial value, you’ll notice that the thumb on the track automatically jumps to that position, providing you exact guidance as to where to insert the label on the slide!
Repeat this Initial value trick for each subsequent stop along the track until you’ve created all the labels you need.
Implementing Interaction 
Ready to add functionality?
We used layers to display our content.
Tip: As we created our layers, we named each in a way that helps identify the number that corresponds to it.
Once we create layers of content, we need to trigger the layers to display!
For example, we’ll trigger to: Show layer for the year 1839 when the slider moves if its value is between the values of 10 and 16.
Create a similar “Show layer” trigger for each layer. 
(You might also create a “Hide layer” trigger to close the first layer of content along the track if your learner can return to a starting point that shows no layer at all.)
Tip: All sliders use variables. Since variables can always recall their latest value, even ignoring slide revisiting properties, we may want to safeguard this activity, if you want your interaction to reset should learners leave and return to this slide. We’ll do so by creating this trigger: Adjust variable by setting the variable equal to a value of 0 when the timeline starts on this slide.
Putting it into Practice
With that, the build is complete! Now, your slider with uneven spacing should work like a charm. Feel free to download our Storyline 360 source file to check out the inner workings.
Are there other ways that you would develop interactions like this? Comment below and let us know!
~Stefanie
Leave a Reply