When designing eLearning courses, providing learners with intuitive controls can significantly enhance the learning experience. One common request is the ability to add a custom volume slider. In Articulate Storyline 360, this can be achieved by combining a simple slider with JavaScript.
Click Preview to watch how to Create Interactive Volume Controls in Storyline 360 with JavaScript in Just a Few Steps.
In this article, we provide step-by-step instructions to create a fully functional custom volume slider in Articulate Storyline 360. This solution enables learners to control the audio directly, while giving you greater flexibility in course design and enhancing the overall user experience.
What is Articulate Storyline 360?
Articulate Storyline 360 is a powerful eLearning authoring tool used to create interactive, multimedia-rich online courses. It is part of the Articulate 360 suite, which includes other tools like Rise 360, Review 360 and Content Library. Storyline 360 is especially popular for creating custom, highly interactive courses for desktop, mobile and tablet learning.
Key Features of Articulate Storyline 360
✔ Slide-Based Authoring: Similar to PowerPoint, allowing you to design slides with text, images, audio and video.
✔ Interactive Elements: Add buttons, sliders, drag-and-drop interactions, quizzes and more.
✔ Triggers & Variables: Create dynamic interactions by controlling the course flow based on learner actions.
✔ Responsive Player: Courses automatically adjust to different screen sizes and devices.
✔ JavaScript Integration: Advanced users can use JavaScript to extend functionality, like custom sliders or analytics tracking.
✔ Built-in Templates & Assets: Access a library of characters, icons, backgrounds and prebuilt interactions.
✔ SCORM & xAPI Compliant: Easily publish courses for Learning Management Systems (LMS).
Why Create a Custom Volume Slider?
Before diving into the setup, here are some key reasons why adding a custom slider makes sense:
✔ User-friendly design: You can place the slider anywhere on the slide to match your layout.
✔ Consistent branding: Custom controls help your course align with your brand’s look and feel.
✔ Better accessibility: Learners can adjust volume without relying on Storyline’s default player.
Step-by-Step Guide to Creating a Custom Volume Slider in Storyline 360 with JavaScript in Minutes
Step 1: Insert a Slider
✔ Open your project in Articulate Storyline 360.
✔ After designing your slide, go to the Insert tab.
✔ Select Slider and place it on your slide.
This slider will act as the volume control for your course audio.
Step 2: Add a JavaScript Trigger at Timeline Start
✔ Create a new trigger to execute JavaScript when the timeline starts on this slide.
✔ Open the JavaScript editor.
✔ Paste in your JavaScript code (provided in below).
setVar(‘Slider1’,DS.appState.currentVolume() * 10);
let lastVolume = DS.appState.currentVolume();
setInterval(() => {
const currentVolume = DS.appState.currentVolume();
if (currentVolume !== lastVolume) {
lastVolume = currentVolume;
const sliderValue = Math.round(currentVolume * 10);
setVar(‘Slider1’, sliderValue);
}
}, 50);
✔ Click OK.
This initializes the audio system and prepares it for dynamic volume adjustments.
Step 3: Add a Trigger for Slider Value Change
✔ Create another trigger to run JavaScript when the slider value changes.
✔ Open the JavaScript editor again.
✔ Paste in the same JavaScript code (provided in below).
const progressbar = object(‘5XP2Qy682TN’);
const slider = getVar(‘Slider1’);
DS.appState.setVolume(slider / 10);
progressbar.state = slider.toString();
✔ Click OK.
This ensures the slider communicates directly with the audio system whenever the learner adjusts it.
Step 4: Add a Condition for Safe Volume Control
✔ In the trigger window, add a condition so the script only applies when the slider value is between 0 and 10.
✔ This ensures that learners cannot push the audio beyond intended limits.
Pro Tip: You can customize this range depending on your course needs, but 0–10 is a safe, balanced setup.
Step 5: Test Your Course
✔ Preview your slide in Storyline 360.
✔ Drag the slider to increase or decrease the volume.
✔ Confirm that the slider directly controls your course audio.
If everything is set up correctly, your custom volume slider will function seamlessly.
Best Practices for Using JavaScript in Storyline 360
✔ Keep code snippets simple: Avoid overly complex JavaScript that may cause conflicts.
✔ Test across browsers: Preview in Chrome, Edge and Firefox to ensure smooth playback.
✔ Use consistent slider design: Make the slider visually clear, so learners know it controls volume.
✔ Document your setup: If you hand off the project, clear notes will help others maintain it.
Looking for a Learning Management System (LMS) Solution?
We offer Learning Management System (LMS) solutions tailored to your organization’s unique training, compliance, and performance management goals.
Whether you’re a corporate organization, educational institution, or non-profit, we’re here to help you deliver engaging, scalable, and measurable learning experiences.
Conclusion
Adding a custom volume slider in Articulate Storyline 360 using JavaScript is a powerful way to improve learner experience and maintain control over your course design. By following these simple steps, insert a slider, add JavaScript triggers. You can deliver a polished, professional audio control system that goes beyond the default Storyline player.
With this customization, your eLearning projects will not only look more professional but also offer learners greater flexibility and accessibility.
Frequently Asked Questions (FAQs)
Q1. What is a custom volume slider in Articulate Storyline 360?
A. Custom volume slider is an interactive element added to a Storyline 360 slide that allows learners to adjust audio volume directly, providing a more user-friendly alternative to the default player controls.
Q2. How can I create custom mute & unmute buttons in Storyline 360?
A. You can create custom mute and unmute buttons in Storyline 360 using shapes or buttons linked to JavaScript triggers.
For a step-by-step demonstration, check out this short video tutorial:
https://www.youtube.com/watch?v=LWRSHvhx1Rg
Q3. Is a custom volume slider compatible with Storyline 360 mobile courses?
A. Yes. By using HTML5 and JavaScript, the slider can work on mobile devices, but it’s important to test responsiveness and touch controls for optimal performance.
Q4. How do custom volume sliders improve learner engagement in Storyline 360?
A. Custom volume sliders give learners control over their experience, allowing them to adjust narration or background music. This increases engagement, reduces frustration and supports accessibility by accommodating different learning environments.
Q5. Are custom volume sliders supported in SCORM or LMS packages?
A. Yes. When published as SCORM or xAPI, custom volume sliders work in most Learning Management Systems, provided the JavaScript and HTML5 audio functions are supported by the LMS environment.
