⏱️ Quick Start

🧰 Functionality Overview

<aside> 🔗

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

</aside>

Default Widget CAPI & JSON

Edit CAPI: Select the Edit pencil icon on the component itself, and the blank CAPI configuration box will pop up.
Add the Image URLs, Image Labels, and Alt Text.
- 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.
- The userModified boolean is triggered when the slider is moved, but it doesn’t have CAPI to trap for it.

Screenshot 2025-06-19 221239.png

Screenshot 2025-06-19 222633.png

Edit JSON: Another way is to select the Edit pencil icon in the Component panel, and the blank JSON configuration box will pop up.
- NOTE: When making edits to the CAPI box above, the JSON will auto-populate with the new information, and you won’t have to make any edits in the JSON box.
- TLDR: Any changes to the CAPI box will show up in the JSON box!

Screenshot 2025-06-19 222133.png

Screenshot 2025-06-19 222703.png

Configured Widget CAPI & JSON

Here’s what a configured Image Slider looks like!
- Top: Configured image slider.
- Middle: CAPI box filled in.
- Bottom: Auto-populated JSON box that contains the information from the CAPI box.

Screenshot 2025-06-19 225946.png

Screenshot 2025-06-19 230409.png

Screenshot 2025-06-19 230012.png

♿ Accessibility

Feature	Status
Keyboard	✅
Screen Reader	✅
Touch	✅

🧠 Trap States & Use Cases

🔹 Initial States (Setup)

Scenario	CAPI
	`stage.slider.userModified Boolean = true/false`
Can change the position of the slider	`stage.slider.currentPosition Number =`

✅ Correct States

Scenario	CAPI
Can check if the slider was moved by the user	`stage.slider.userModified Boolean = true`
Verifies if the slider was adjusted to the position you're trapping for	`stage.slider.currentPosition Number =`
Not sure what this does	`stage.slider.startingPosition Number =`
Are these things we change when only initially setting up the widget?	`stage.slider.bottomImageAltText String =`
v	`stage.slider.bottomImageLabel String =`
v	`stage.slider.bottomImageURL String =`
v	`stage.slider.topImageAltText String =`
v	`stage.slider.topImageLabel String =`
v	`stage.slider.topImageURL String =`

❌ Incorrect States

Scenario	CAPI
Can check if the slider was moved by the user	`stage.slider.userModified Boolean = false`
Verifies if the slider was adjusted to the position you're trapping for	`stage.slider.currentPosition Number =`

🔄 Mutate States

Scenario	CAPI