There was a question in the Articulate eLearning community recently that peaked my interest.
The default Storyline sliders require the slider thumb to be dragged along the slider track. The track itself is not clickable, but that can easily be fixed. All that’s needed are some transparent shapes which are placed on top of the slider. Clicking any of these shapes will adjust the slider variable and thus move the thumb to the corresponding position along the track.
But that got my thinking: How would I create a slider that allows for both options: dragging the thumb as usual, or alternatively, click somewhere on the track to move the thumb to that position?
I came up with a fairly simple solution. I reused the same transparent shapes from the original solution, but now use triggers to change their state from Hidden to Normal, depending on the thumb’s current position.
For example, if the slider value is 4, then the shape that sits in position 4 should be Hidden, while all the other shapes are still in Normal and therefore clickable. With that approach, the shapes are dynamically ‘turned off/on’ as the slider thumb is being dragged along the track.
Here is the end result of this little experiment.
This tweak might be useful for mobile content. Often users on phones or tablets find it tricky to move the slider thumb and position it precisely to a specific point on the track. In that case, it may also be useful to provide visual stops for the various slider values.