How to Create an Interactive Image Slider Activity with HTML, CSS, and JavaScript

Today, we’re diving into another simple but powerful HTML and JavaScript activity you can easily add to your online learning content.

This activity is fantastic for any educational topic where you need to show changes or differences visually — think environmental shifts across seasons, stages of plant growth, or any scenario that benefits from a layered, evolving image.

Let’s break it down: I’ll show you what it looks like, how the code works, and how you can embed it into your Learning Management System (LMS), like Moodle.

What the Activity Looks Like

The core idea is simple but effective:

Four images (in our example, scenes of different seasons) are layered on top of each other.
A slider allows learners to “peel back” layers, revealing the next image underneath.
As you slide across, the seasons — or whatever images you use — transition beautifully!

This setup is great for eLearning courses, science content, geography, history, or any visual storytelling you need to create.

How It’s Built

The project uses three basic tools:

HTML for structure
CSS for positioning
JavaScript for interactivity

Let’s take a quick look at each part.

The HTML Structure

Here’s the essential HTML:

<h2>
  Drag the bars to view the different seasons.
</h2>
<div class="slidecontainer"> Image 1:
  <input type="range" min="1" max="100" value="0" class="slider" id="riactivityslider1"> Transparency
</div>
<div class="slidecontainer"> Image 2:
  <input type="range" min="1" max="100" value="0" class="slider" id="riactivityslider2"> Transparency
</div>
<div class="slidecontainer"> Image 3:
  <input type="range" min="1" max="100" value="0" class="slider" id="riactivityslider3"> Transparency
</div>
<div style="position:relative;margin:40px;">
  <img id="riimage001" width="100%" style="left:0px; top:0px; z-index:4;position:absolute;" src="https://ricoshae.com.au/assets/season1.png">
  <img id="riimage002" width="100%" style="left:0px; top:0px; z-index:3; position:absolute;" src="https://ricoshae.com.au/assets/season2.png">
  <img id="riimage003" width="100%" style="left:0px; top:0px; z-index:2; position:absolute;" src="https://ricoshae.com.au/assets/season3.png">
  <img id="riimage004" width="100%" style="left:0px; top:0px; z-index:1; position:absolute;" src="https://ricoshae.com.au/assets/season4.png">
</div>
Code language: HTML, XML (xml)

Inputs are HTML5 sliders (type="range").
Images are stacked on top of each other, using absolute positioning.
The z-index ensures the correct layering — higher numbers sit on top.

The CSS (Inline for Simplicity)

The images are layered with position: absolute and adjusted using left: 0; top: 0;, ensuring they perfectly overlay.

You can, of course, move this styling into a separate .css file for cleaner code if you prefer.

The JavaScript (Tiny but Mighty)

The JavaScript controls the sliders and image transparency.

(function() {
  // your page initialization code here
  fnReset(); //call reset on document ready

  document.getElementById("riactivityslider1").addEventListener('input', function(event) {
    document.getElementById("riimage001").style.opacity = 1 - (this.value / 100);
  });

  document.getElementById("riactivityslider2").addEventListener('input', function(event) {
    document.getElementById("riimage002").style.opacity = 1 - (this.value / 100);
  });
  document.getElementById("riactivityslider3").addEventListener('input', function(event) {
    document.getElementById("riimage003").style.opacity = 1 - (this.value / 100);
  });

})();

function fnReset() {
  document.getElementById("riactivityslider1").value = 1;
  document.getElementById("riactivityslider2").value = 1;
  document.getElementById("riactivityslider3").value = 1;
}
Code language: JavaScript (javascript)

When the page loads, the sliders reset to the start position.
As you move each slider, the corresponding image becomes more transparent, revealing the layer underneath.

You could even add a Reset Button later by wiring another event listener to call reset() again!

How to Add It to Your LMS

Embedding this into your online courses is simple:

Wrap your code into an HTML file.
Host it somewhere accessible (could be internal hosting or a public place).
Use an <iframe> to embed the activity into Moodle or any LMS that allows iframe embeds.

When embedding, remember:

Adjust the height of your iframe. For this activity, around 600px gives a nice fit.
The content is responsive and will scale down beautifully on smaller screens.

Example embed code:

<code><iframe src="your-activity.html" width="100%" height="600" frameborder="0"></iframe></code>
Code language: HTML, XML (xml)

Final Thoughts

That’s it! A simple yet powerful interactive tool that you can customize endlessly for your educational needs. 🌟

There’s a lot more where this came from — I’ve got a series of these small, adaptable JavaScript + HTML5 activities lined up, perfect for spicing up your courses. Make sure you subscribe on YouTube to catch them as they come out!

Also, if you’re serious about creating interactive content or getting deeper into platforms like Moodle LMS, check out my full courses on those topics. I walk you through everything, step-by-step.

Thanks for hanging out with me — see you in the next tutorial!

Use JavaScript to manipulate IMAGE OPACITY for an education activity