How can I choose the right interaction style in the Before & After Slider widget (horizontal, vertical, or flashlight)?
Different layouts and orientation settings create very different user behavior. Choosing the right interaction style is critical for usability.
This screenshot should show where layout style and interaction behavior are controlled.
In Templates, pick the visual mode that matches your use case:
Standard comparison: Classic Split
Attention-focused effect: Glass Focus or X-Ray Scanner
Spot reveal storytelling: Flashlight Reveal
In Appearance > Behavior, configure:
Vertical Orientation (if non-flashlight layout supports it)
Hover Reveal Mode for desktop-heavy experiences
Smooth Transitions for polished interaction
In Appearance > Slider Style, tune width/height and slider thickness (or reveal circle size for flashlight).
Validate on mobile: hover behavior may not feel natural on touch devices.
Use this setting when interaction feels awkward even though image content is good.
Check this if the result does not look right:
If users struggle to drag, increase slider visibility and thickness.
If mobile feels hard to use, avoid hover-dependent behavior.
If flashlight feels too small/large, adjust reveal circle size for comfortable scanning.