Custom volume slider

I've attached my .story file for reference. It contains just two JavaScript triggers and three objects: a video, a slider, and a shape that serves as a progress bar aligned directly below the slider.

If your slider is 170px wide, make sure the progress bar shape below it is exactly the same width. Now, create a first state for the progress bar and name it 1. This is important for the script to work correctly. Since the slider has 10 stops, your shape will need 10 corresponding states.

In state 1, duplicate the shape, fill it with a color to represent progress, and place it over the original. If the slider and shape are both 170px wide, the filled shape in state 1 should be approximately 17–20px wide, roughly one-tenth of the total width.

Then, copy state 1 and create state 2. In this state, extend the filled shape to 34px (or double the width of the first). Continue this pattern for each new state (1 - 10), incrementing the width of the colored overlay by roughly 17px each time.

I won’t go into too much detail about how we get or set volume values using the DS.appState object. What’s important is that if you're creating your project from scratch, make sure to update your slider variable consistently.

You don’t need any triggers to change states manually. With the newer Storyline JavaScript API, this can all be handled dynamically.

Example of code executed when the slider moves:

const progressbar = object('5XP2Qy682TN'); //update your object id
const slider = getVar('Slider1'); //update the slider variable
DS.appState.setVolume(slider / 10);
progressbar.state = slider.toString(); //update progressbar if different name is declared at the top