Point - Image comparison slider

Introduction

Introducing the Interactive Image Slider - a powerful feature that lets users compare two images side by side with a smooth, draggable divider. Whether showcasing before-and-after visuals, design variations, or product comparisons, this tool provides an engaging and intuitive experience.

Customise the slider’s handle, border, colours, and position to fit your layout. This feature lets you compare images seamlessly across all devices, including touchscreens.

Supporting both PNG and JPG file formats, the Interactive Image Slider offers a flexible and visually impactful way to present comparisons with ease.

Requirements

• You need to have both Point and Place as part of your license to access this feature
• Your user needs sufficient access rights to edit pages in Point

How to activate

To add the slider feature, follow these steps:

1. In Point, go into edit mode on the page you want to add the image slider
2. Click Comparison slider as seen below to add the image slider
   • 
3. Click the slider symbol to access the settings of the image slider - as shown below
   • 
4. As soon as you've adjusted the settings, remember to click save.

How to use

To use the image slider, simply click-and-drag the slider button in the middle of the frame to slide between the two images compared next to each other. 

Use examples 

• Before-and-After Comparisons
  • Example: Highlight branding updates like logo redesigns or color palette changes.
• Proper vs. Improper Usage
  • Example: Showcase correct and incorrect logo placements or contrast rules.
• Color Applications
  • Example: Compare primary vs. secondary color schemes or accessible vs. non-accessible designs.
• Typography Adjustments
  • Example: Demonstrate proper kerning, typeface, or font size usage.
• High-Quality vs. Low-Quality Visuals
  • Example: Contrast high-resolution images with pixelated or low-quality assets.