Using multiple sliders as an alternative to drag-and-drop, with dynamic Z-index control

Hello!

For this week's ELH Challenge (#489), DavidAnderson asked us "to share an interactive example that shows people how to set a table. Go formal, go casual, or mix it up. It is totally your call." 

So, of course, I built a pirate-themed demo inspired by The Goonies....

This is my latest experiment using customised sliders as an accessible alternative to drag-and-drop. As shown below, by replacing the slider thumb with an image, it's possible to build an 'on rails' drag-and-drop that is also accessible from the keyboard:

Being a bit of a perfectionist, I also used Javascript to change the Z-index position of the 'goblet' slider, so it passes in front of the knife and fork when it is moved, despite initially appearing beneath them.  (We're setting a table - everything needs to be in the right place!)

Z-index is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Changing the z-index number with Javascript means I can move the goblet from its starting position behind the knife and fork, placing it in front of the knife and fork when appropriate.

This also helped to make all of the sliders 'grabbable' within such a small area, where otherwise the larger slider could block out the other two.

This code moves the goblet to the very top:

let controls = document.querySelector("[data-model-id='5xjQeS51pKT']");
controls.style.zIndex = "999" 

This code returns it to its starting position:

let controls = document.querySelector("[data-model-id='5xjQeS51pKT']");
controls.style.zIndex = "4" 

And this IF/ELSE trigger moves the goblet to the back when the slider is at position 0 and 2.5, or to the very front when it is in any other position:

For good measure, I also added a trigger that moves the slider to the very front whenever it is clicked.

For more information on manipulating the z-index number of objects in Storyline, check out JeffBatt-bf4917's brilliant tutorial here.

But hang on a minute

Testing my demo, I found that the sliders for the knife and fork were accessible from the keyboard, but the slider I used for the goblet was not. It appears that changing the z-index of the slider also knocks out the accessibility controls. 

While I could still highlight the slider using the tab key in the usual fashion, I could no longer change its position using the arrow keys. 

It took a bit of lateral thinking, but I found a workaround...

document.querySelector("#acc-5xjQeS51pKT").addEventListener("keydown", function(e) {
    if (e.key === "ArrowLeft") {
        let currentVal = GetPlayer().GetVar("GOBLET");
        if (currentVal > 0) {
            GetPlayer().SetVar("GOBLET", Math.max(0, currentVal - 0.5));
        }
    } else if (e.key === "ArrowRight") {
        let currentVal = GetPlayer().GetVar("GOBLET");
        if (currentVal < 10) {
            GetPlayer().SetVar("GOBLET", Math.min(10, currentVal + 0.5));
        }
    }
})

When the user highlights the goblet with the Tab key, the above code listens for whether they then press the left or right arrow keys.

If they press the left arrow, the code checks the current position of the goblet and moves it half a step to the left - but won't let it go below zero.

If they press the right arrow, it does the same thing but moves it half a step to the right - but won't let it go above ten.

I've basically replaced the accessibility controls that were affected by the z-index changes, all to ensure the goblet appears in front of the cutlery... 😃

Every day's a school day!

I've attached my master file for anyone who'd like to take a closer look at this. My original idea was to dynamically change the z-index position of all three sliders in relation to each other, to ensure they are all consistently 'grabbable', but I just couldn't get this to work smoothly.

But for my money, this technique presents a viable alternative to drag-and-drop that has potential if explored further.

Let me know what you think!

EDIT: I've also now attached v2 of the master file which incorporates Nedim's debugging. The z-index of all three sliders are now dynamically controlled to maintain the perspective throughout the interaction, and the accessibility controls are working without additional code.