<aside> ℹ️

Link: https://etx-scripts.s3.us-west-2.amazonaws.com/ETX-torus-widgets/image-comparison-slider/index.html

Demo Lesson: Author | Preview

⚠️ Reminder: Only enter in READ ONLY

</aside>

⏱️ Quick Start

Screenshot 2025-06-19 225946.png

🧰 Functionality Overview

Default Widget

Use the configure panel to set up the component: Add the Image URLs, Image Labels, and Alt Text. You can also set the starting and current position (which should be the same when initially configuring).
The topImageURL ****is the image that appears on the left of the slider.
The bottomImageURL is the image that appears on the right of the slider.

Screenshot 2025-06-19 221239.png

Screenshot 2025-06-19 222633.png

Configured Widget

Here’s what a configured Image Slider looks like!

Configured image slider.

Screenshot 2025-06-19 225946.png

Config. panel filled in.

Screenshot 2025-06-19 230409.png

♿ Accessibility

Feature	Status
Keyboard	✅
Screen Reader	✅
Touch	✅

🧠 Trap States & Use Cases

🔹 Initial States (Setup)

Scenario	CAPI
Can set where the slider is positioned initially (if you want the position to be different on a new screen)	`stage.slider.startingPosition Number =`
This has to be the same value as the `startingPosition`	`stage.slider.currentPosition Number =`

✅ Correct States

Scenario	CAPI
Can check if the slider was moved by the user	`stage.slider.userModified Boolean = true`
Checks if the position of the slider was moved from its starting position	`stage.slider.currentPosition Number != 50`
Checks if the position of the slider was moved to the right end	`stage.slider.currentPosition Number > 50`
Checks if the position of the slider was moved to the left end	`stage.slider.currentPosition Number < 50`

❌ Incorrect States

Scenario	CAPI
Can check if the slider was not moved by the user	`stage.slider.userModified Boolean = false`
Checks if the position of the slider was not moved from its starting position	`stage.slider.currentPosition Number = 50`
Checks if the position of the slider was not moved to the right end	`stage.slider.currentPosition Number < 50`
Checks if the position of the slider was not moved to the left end	`stage.slider.currentPosition Number > 50`

🔄 Mutate States

Scenario	CAPI
Moves the slider to reveal the image on the left	`stage.slider.currentPosition Number = 100`
Moves the slider to reveal the image on the right	`stage.slider.currentPosition Number = 0`