# Image comparison slider

Schema-only template for a image comparison slider component.

By Croct. Categories: interface.

[Source](https://github.com/croct-tech/templates/blob/master/templates/croct/ui/component/image-comparison-slider/)

## Installation

```sh
npx croct@latest use croct://ui/component/image-comparison-slider
```

# Introduction

An image comparison slider displays two images side by side with a draggable handle to highlight visual differences.

It is commonly used to showcase before-and-after states, product improvements, or transformations and is typically
placed in feature sections or case studies to enhance visual storytelling by emphasizing contrast and impact.

Personalizing the images, such as adapting visuals to match user segments or contexts, and testing different placements
or default positions can improve engagement and make the content more relatable and effective.

> [!TIP Need the code?]
> Explore popular React comparison slider libraries in our [guide](https://blog.croct.com/post/best-react-before-after-image-comparison-slider-libraries).

## Usage

To add this component to your workspace, run:

```croct-cmd
croct use croct://ui/component/image-comparison-slider
```