Forum Discussion

MattMason-613f5's avatar
MattMason-613f5
Community Member
3 days ago

Custom volume slider

Hi

I wondered if someone had been able to find a way to use a slider as a custom volume controller for videos within slides. I know we can have this control on the player, but i'd like to custom build this into the slide (much like I have a pause button) so that it is on brand and looks/feels better with my style.

I thought I had seen someone use js for this before somewhere but can't seem to find the discussion again! 

Thanks

advice
storyline 360

4 Replies

  • Nedim's avatar
    Nedim
    Community Member
    3 days ago

    Here's a quick version featuring a slider with a custom volume indicator that supports multiple states, one for each volume step. When the video slide loads, the slider value is synchronized with the current volume, and it stays in sync while the slider is being moved. If the visual appearance the volume indicator isn't essential, you can simplify it by using just the slider alone. It works just like Storyline’s default volume functionality: when you adjust the volume knob in the slider, the slide's volume level syncs with it, and vice versa. The custom slider remains in sync with the current volume, updating in real time whether you move the slider or use the volume built-in controls. Let me know if you need me to upload my .story file.

     

    • MattMason-613f5's avatar
      MattMason-613f5
      Community Member
      2 days ago

      Hey, Nedim. Yeah I'd be really interested to see that. Thanks so much for your help!

      • Nedim's avatar
        Nedim
        Community Member
        2 days ago

        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



Related Content