diff --git a/apps/showcase/assets/images/island1.jpg b/apps/showcase/assets/images/island1.jpg
new file mode 100644
index 000000000..14fc6218b
Binary files /dev/null and b/apps/showcase/assets/images/island1.jpg differ
diff --git a/apps/showcase/assets/images/island2.jpg b/apps/showcase/assets/images/island2.jpg
new file mode 100644
index 000000000..dad67080c
Binary files /dev/null and b/apps/showcase/assets/images/island2.jpg differ
diff --git a/apps/showcase/assets/menu/menu.json b/apps/showcase/assets/menu/menu.json
index 781612878..e0f4040ee 100644
--- a/apps/showcase/assets/menu/menu.json
+++ b/apps/showcase/assets/menu/menu.json
@@ -416,8 +416,8 @@
                             "to": "/image"
                         },
                         {
-                            "name": "ImageDiff",
-                            "to": "/imagediff",
+                            "name": "ImageCompare",
+                            "to": "/imagecompare",
                             "badge": "NEW"
                         }
                     ]
diff --git a/apps/showcase/doc/imagediff/AccessibilityDoc.vue b/apps/showcase/doc/imagecompare/AccessibilityDoc.vue
similarity index 100%
rename from apps/showcase/doc/imagediff/AccessibilityDoc.vue
rename to apps/showcase/doc/imagecompare/AccessibilityDoc.vue
diff --git a/apps/showcase/doc/imagecompare/BasicDoc.vue b/apps/showcase/doc/imagecompare/BasicDoc.vue
new file mode 100644
index 000000000..5057fadc2
--- /dev/null
+++ b/apps/showcase/doc/imagecompare/BasicDoc.vue
@@ -0,0 +1,65 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Images are defined using templating with <i>left</i> and <i>right</i> slots. Use the <i>style</i> or <i>class</i> properties to define the size of the container.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ImageCompare class="shadow-lg rounded-2xl">
+            <template #left>
+                <img src="~/assets/images/island1.jpg" />
+            </template>
+            <template #right>
+                <img src="~/assets/images/island2.jpg" />
+            </template>
+        </ImageCompare>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ImageCompare class="shadow-lg rounded-2xl">
+    <template #left>
+        <img src="~/assets/images/island1.jpg" />
+    </template>
+    <template #right>
+        <img src="~/assets/images/island2.jpg" />
+    </template>
+</ImageCompare>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <ImageCompare class="shadow-lg rounded-2xl">
+            <template #left>
+                <img src="~/assets/images/island1.jpg" />
+            </template>
+            <template #right>
+                <img src="~/assets/images/island2.jpg" />
+            </template>
+        </ImageCompare>
+    </div>
+</template>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ImageCompare class="shadow-lg rounded-2xl">
+            <template #left>
+                <img src="~/assets/images/island1.jpg" />
+            </template>
+            <template #right>
+                <img src="~/assets/images/island2.jpg" />
+            </template>
+        </ImageCompare>
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/imagediff/ImportDoc.vue b/apps/showcase/doc/imagecompare/ImportDoc.vue
similarity index 85%
rename from apps/showcase/doc/imagediff/ImportDoc.vue
rename to apps/showcase/doc/imagecompare/ImportDoc.vue
index 6d1c0e4de..571ddb772 100644
--- a/apps/showcase/doc/imagediff/ImportDoc.vue
+++ b/apps/showcase/doc/imagecompare/ImportDoc.vue
@@ -9,7 +9,7 @@ export default {
         return {
             code: {
                 basic: `
-import ImageDiff from 'primevue/imagediff';
+import ImageCompare from 'primevue/imagecompare';
 `
             }
         };
diff --git a/apps/showcase/doc/imagecompare/ResponsiveDoc.vue b/apps/showcase/doc/imagecompare/ResponsiveDoc.vue
new file mode 100644
index 000000000..4ad16941c
--- /dev/null
+++ b/apps/showcase/doc/imagecompare/ResponsiveDoc.vue
@@ -0,0 +1,65 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Apply responsive styles to the container element to optimize display per screen size.</p>
+    </DocSectionText>
+    <div class="card flex justify-center">
+        <ImageCompare class="w-full sm:w-96 shadow-lg rounded-2xl">
+            <template #left>
+                <img src="~/assets/images/island1.jpg" />
+            </template>
+            <template #right>
+                <img src="~/assets/images/island2.jpg" />
+            </template>
+        </ImageCompare>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<ImageCompare class="w-full sm:w-96 shadow-lg rounded-2xl">
+    <template #left>
+        <img src="~/assets/images/island1.jpg" />
+    </template>
+    <template #right>
+        <img src="~/assets/images/island2.jpg" />
+    </template>
+</ImageCompare>
+`,
+                options: `
+<template>
+    <div class="card flex justify-center">
+        <ImageCompare class="w-full sm:w-96 shadow-lg rounde-2xl">
+            <template #left>
+                <img src="~/assets/images/island1.jpg" />
+            </template>
+            <template #right>
+                <img src="~/assets/images/island2.jpg" />
+            </template>
+        </ImageCompare>
+    </div>
+</template>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <ImageCompare class="w-full sm:w-96 shadow-lg">
+            <template #left>
+                <img src="~/assets/images/island1.jpg" />
+            </template>
+            <template #right>
+                <img src="~/assets/images/island2.jpg" />
+            </template>
+        </ImageCompare>
+    </div>
+</template>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/imagecompare/pt/PTViewer.vue b/apps/showcase/doc/imagecompare/pt/PTViewer.vue
new file mode 100644
index 000000000..f4f60a89c
--- /dev/null
+++ b/apps/showcase/doc/imagecompare/pt/PTViewer.vue
@@ -0,0 +1,29 @@
+<template>
+    <DocPTViewer :docs="docs">
+        <ImageCompare style="width: 728px; height: 410px">
+            <template #left>
+                <img src="~/assets/images/island1.jpg" />
+            </template>
+            <template #right>
+                <img src="~/assets/images/island2.jpg" />
+            </template>
+        </ImageCompare>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    data: getPTOptions('ImageCompare'),
+                    key: 'ImageCompare'
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/doc/imagediff/pt/index.vue b/apps/showcase/doc/imagecompare/pt/index.vue
similarity index 77%
rename from apps/showcase/doc/imagediff/pt/index.vue
rename to apps/showcase/doc/imagecompare/pt/index.vue
index 605d9671f..16b711368 100644
--- a/apps/showcase/doc/imagediff/pt/index.vue
+++ b/apps/showcase/doc/imagecompare/pt/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="doc-main">
         <div class="doc-intro">
-            <h1>ImageDiff Pass Through</h1>
+            <h1>ImageCompare Pass Through</h1>
         </div>
         <DocSections :docs="docs" />
     </div>
@@ -23,10 +23,10 @@ export default {
                     component: PTViewer
                 },
                 {
-                    id: 'pt.doc.image',
-                    label: 'ImageDiff PT Options',
+                    id: 'pt.doc.imagecompare',
+                    label: 'ImageCompare PT Options',
                     component: DocApiTable,
-                    data: getPTOptions('ImageDiff')
+                    data: getPTOptions('ImageCompare')
                 }
             ]
         };
diff --git a/apps/showcase/doc/imagediff/theming/TailwindDoc.vue b/apps/showcase/doc/imagecompare/theming/TailwindDoc.vue
similarity index 100%
rename from apps/showcase/doc/imagediff/theming/TailwindDoc.vue
rename to apps/showcase/doc/imagecompare/theming/TailwindDoc.vue
diff --git a/apps/showcase/doc/imagediff/theming/index.vue b/apps/showcase/doc/imagecompare/theming/index.vue
similarity index 90%
rename from apps/showcase/doc/imagediff/theming/index.vue
rename to apps/showcase/doc/imagecompare/theming/index.vue
index 21123430c..d4293517c 100644
--- a/apps/showcase/doc/imagediff/theming/index.vue
+++ b/apps/showcase/doc/imagecompare/theming/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="doc-main">
         <div class="doc-intro">
-            <h1>ImageDiff Theming</h1>
+            <h1>ImageCompare Theming</h1>
         </div>
         <DocSections :docs="docs" />
     </div>
@@ -26,14 +26,14 @@ export default {
                             label: 'CSS Classes',
                             description: 'List of class names used in the styled mode.',
                             component: DocApiTable,
-                            data: getStyleOptions('ImageDiff')
+                            data: getStyleOptions('ImageCompare')
                         },
                         {
                             id: 'theming.tokens',
                             label: 'Design Tokens',
                             description: 'List of design tokens used in a preset.',
                             component: DocApiTable,
-                            data: getTokenOptions('ImageDiff')
+                            data: getTokenOptions('ImageCompare')
                         }
                     ]
                 },
diff --git a/apps/showcase/doc/imagediff/BasicDoc.vue b/apps/showcase/doc/imagediff/BasicDoc.vue
deleted file mode 100644
index 667168f10..000000000
--- a/apps/showcase/doc/imagediff/BasicDoc.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>ImageDiff</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <ImageDiff />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: {
-                basic: `
-<ImageDiff />
-`,
-                options: `
-<template>
-    <div class="card flex justify-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
-    </div>
-</template>
-`,
-                composition: `
-<template>
-    <div class="card flex justify-center">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" />
-    </div>
-</template>
-`
-            }
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/doc/imagediff/pt/PTViewer.vue b/apps/showcase/doc/imagediff/pt/PTViewer.vue
deleted file mode 100644
index 6a442b24d..000000000
--- a/apps/showcase/doc/imagediff/pt/PTViewer.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-    <DocPTViewer :docs="docs">
-        <Image src="https://primefaces.org/cdn/primevue/images/galleria/galleria10.jpg" alt="Image" width="250" preview />
-    </DocPTViewer>
-</template>
-
-<script>
-import { getPTOptions } from '@/components/doc/helpers';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    data: getPTOptions('ImageDiff'),
-                    key: 'ImageDiff'
-                }
-            ]
-        };
-    }
-};
-</script>
diff --git a/apps/showcase/pages/imagecompare/index.vue b/apps/showcase/pages/imagecompare/index.vue
new file mode 100644
index 000000000..64ba235dd
--- /dev/null
+++ b/apps/showcase/pages/imagecompare/index.vue
@@ -0,0 +1,43 @@
+<template>
+    <DocComponent title="Vue ImageCompare Component" header="ImageCompare" description="Compare two images side by side with a slider." :componentDocs="docs" :apiDocs="['ImageCompare']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/imagecompare/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/imagecompare/BasicDoc.vue';
+import ImportDoc from '@/doc/imagecompare/ImportDoc.vue';
+import ResponsiveDoc from '@/doc/imagecompare/ResponsiveDoc.vue';
+import PTComponent from '@/doc/imagecompare/pt/index.vue';
+import ThemingDoc from '@/doc/imagecompare/theming/index.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'responsive',
+                    label: 'Responsive',
+                    component: ResponsiveDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
+        };
+    }
+};
+</script>
diff --git a/apps/showcase/pages/imagediff/index.vue b/apps/showcase/pages/imagediff/index.vue
deleted file mode 100644
index aa5e52f8c..000000000
--- a/apps/showcase/pages/imagediff/index.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-    <DocComponent title="Vue ImageDiff Component" header="ImageDiff" description="ImageDiff" :componentDocs="docs" :apiDocs="['ImageDiff']" />
-</template>
-<!-- :ptTabComponent="ptComponent"
-    :themingDocs="themingDoc" -->
-
-<script>
-import AccessibilityDoc from '@/doc/imagediff/AccessibilityDoc.vue';
-import BasicDoc from '@/doc/imagediff/BasicDoc.vue';
-import ImportDoc from '@/doc/imagediff/ImportDoc.vue';
-// import PTComponent from '@/doc/imagediff/pt/index.vue';
-// import ThemingDoc from '@/doc/imagediff/theming/index.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'basic',
-                    label: 'Basic',
-                    component: BasicDoc
-                },
-                {
-                    id: 'accessibility',
-                    label: 'Accessibility',
-                    component: AccessibilityDoc
-                }
-            ]
-            // ptComponent: PTComponent,
-            // themingDoc: ThemingDoc
-        };
-    }
-};
-</script>
diff --git a/packages/metadata/src/components/index.ts b/packages/metadata/src/components/index.ts
index e821e0196..06ec7d201 100644
--- a/packages/metadata/src/components/index.ts
+++ b/packages/metadata/src/components/index.ts
@@ -90,7 +90,7 @@ export const chart: MetaType[] = toMeta(['Chart']);
 
 export const messages: MetaType[] = toMeta(['Message', 'InlineMessage', { name: 'Toast', use: { as: 'ToastService' } }]);
 
-export const media: MetaType[] = toMeta(['Carousel', 'Galleria', 'Image', 'ImageDiff']);
+export const media: MetaType[] = toMeta(['Carousel', 'Galleria', 'Image', 'ImageCompare']);
 
 export const misc: MetaType[] = toMeta(['Avatar', 'AvatarGroup', 'Badge', 'BlockUI', 'Chip', 'Inplace', 'MeterGroup', 'OverlayBadge', 'ScrollTop', 'Skeleton', 'ProgressBar', 'ProgressSpinner', 'Tag', 'Terminal']);
 
diff --git a/packages/primevue/src/config/Config.d.ts b/packages/primevue/src/config/Config.d.ts
index 287030545..438b2910f 100644
--- a/packages/primevue/src/config/Config.d.ts
+++ b/packages/primevue/src/config/Config.d.ts
@@ -48,7 +48,7 @@ import type { GalleriaPassThroughOptions } from 'primevue/galleria';
 import type { IconFieldPassThroughOptions } from 'primevue/iconfield';
 import type { IftaLabelPassThroughOptions } from 'primevue/iftalabel';
 import type { ImagePassThroughOptions } from 'primevue/image';
-import type { ImageDiffPassThroughOptions } from 'primevue/imagediff';
+import type { ImageComparePassThroughOptions } from 'primevue/imagecompare';
 import type { InlineMessagePassThroughOptions } from 'primevue/inlinemessage';
 import type { InplacePassThroughOptions } from 'primevue/inplace';
 import type { InputChipsPassThroughOptions } from 'primevue/inputchips';
@@ -206,7 +206,7 @@ export interface PrimeVuePTOptions {
     iconfield?: DefaultPassThrough<IconFieldPassThroughOptions>;
     iftalabel?: DefaultPassThrough<IftaLabelPassThroughOptions>;
     image?: DefaultPassThrough<ImagePassThroughOptions>;
-    imagediff?: DefaultPassThrough<ImageDiffPassThroughOptions>;
+    imagecompare?: DefaultPassThrough<ImageComparePassThroughOptions>;
     inlinemessage?: DefaultPassThrough<InlineMessagePassThroughOptions>;
     inplace?: DefaultPassThrough<InplacePassThroughOptions>;
     inputchips?: DefaultPassThrough<InputChipsPassThroughOptions>;
diff --git a/packages/primevue/src/imagediff/BaseImageDiff.vue b/packages/primevue/src/imagecompare/BaseImageCompare.vue
similarity index 59%
rename from packages/primevue/src/imagediff/BaseImageDiff.vue
rename to packages/primevue/src/imagecompare/BaseImageCompare.vue
index 5aaf98151..bfecc6ea1 100644
--- a/packages/primevue/src/imagediff/BaseImageDiff.vue
+++ b/packages/primevue/src/imagecompare/BaseImageCompare.vue
@@ -1,15 +1,15 @@
 <script>
 import BaseComponent from '@primevue/core/basecomponent';
-import ImageDiffStyle from 'primevue/imagediff/style';
+import ImageCompareStyle from 'primevue/imagecompare/style';
 
 export default {
-    name: 'BaseImageDiff',
+    name: 'BaseImageCompare',
     extends: BaseComponent,
     props: {},
-    style: ImageDiffStyle,
+    style: ImageCompareStyle,
     provide() {
         return {
-            $pcImageDiff: this,
+            $pcImageCompare: this,
             $parentInstance: this
         };
     }
diff --git a/packages/primevue/src/imagediff/ImageDiff.d.ts b/packages/primevue/src/imagecompare/ImageCompare.d.ts
similarity index 51%
rename from packages/primevue/src/imagediff/ImageDiff.d.ts
rename to packages/primevue/src/imagecompare/ImageCompare.d.ts
index b3a132583..f153506bd 100644
--- a/packages/primevue/src/imagediff/ImageDiff.d.ts
+++ b/packages/primevue/src/imagecompare/ImageCompare.d.ts
@@ -1,24 +1,24 @@
 /**
  *
- * ImageDiff
+ * ImageCompare
  *
- * [Live Demo](https://www.primevue.org/imagediff/)
+ * [Live Demo](https://www.primevue.org/ImageCompare/)
  *
- * @module imagediff
+ * @module ImageCompare
  *
  */
 import type { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '@primevue/core';
 import type { PassThroughOptions } from 'primevue/passthrough';
 import { TransitionProps } from 'vue';
 
-export declare type ImageDiffPassThroughOptionType = ImageDiffPassThroughAttributes | ((options: ImageDiffPassThroughMethodOptions) => ImageDiffPassThroughAttributes | string) | string | null | undefined;
+export declare type ImageComparePassThroughOptionType = ImageComparePassThroughAttributes | ((options: ImageComparePassThroughMethodOptions) => ImageComparePassThroughAttributes | string) | string | null | undefined;
 
-export declare type ImageDiffPassThroughTransitionType = TransitionProps | ((options: ImageDiffPassThroughMethodOptions) => TransitionProps) | undefined;
+export declare type ImageComparePassThroughTransitionType = TransitionProps | ((options: ImageComparePassThroughMethodOptions) => TransitionProps) | undefined;
 
 /**
  * Custom passthrough(pt) option method.
  */
-export interface ImageDiffPassThroughMethodOptions {
+export interface ImageComparePassThroughMethodOptions {
     /**
      * Defines instance.
      */
@@ -26,7 +26,7 @@ export interface ImageDiffPassThroughMethodOptions {
     /**
      * Defines valid properties.
      */
-    props: ImageDiffProps;
+    props: ImageCompareProps;
     /**
      * Defines valid attributes.
      */
@@ -43,35 +43,35 @@ export interface ImageDiffPassThroughMethodOptions {
 
 /**
  * Custom passthrough(pt) options.
- * @see {@link ImageDiffProps.pt}
+ * @see {@link ImageCompareProps.pt}
  */
-export interface ImageDiffPassThroughOptions {
+export interface ImageComparePassThroughOptions {
     /**
      * Used to pass attributes to the root's DOM element.
      */
-    root?: ImageDiffPassThroughOptionType;
+    root?: ImageComparePassThroughOptionType;
 }
 
 /**
  * Custom passthrough attributes for each DOM elements
  */
-export interface ImageDiffPassThroughAttributes {
+export interface ImageComparePassThroughAttributes {
     [key: string]: any;
 }
 
 /**
- * Defines valid properties in ImageDiff component.
+ * Defines valid properties in ImageCompare component.
  */
-export interface ImageDiffProps {
+export interface ImageCompareProps {
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */
     dt?: DesignToken<any>;
     /**
      * Used to pass attributes to DOM elements inside the component.
-     * @type {ImageDiffPassThroughOptions}
+     * @type {ImageComparePassThroughOptions}
      */
-    pt?: PassThrough<ImageDiffPassThroughOptions>;
+    pt?: PassThrough<ImageComparePassThroughOptions>;
     /**
      * Used to configure passthrough(pt) options of the component.
      * @type {PassThroughOptions}
@@ -85,32 +85,32 @@ export interface ImageDiffProps {
 }
 
 /**
- * Defines valid slots in ImageDiff slots.
+ * Defines valid slots in ImageCompare slots.
  */
-export interface ImageDiffSlots {}
+export interface ImageCompareSlots {}
 
-export interface ImageDiffEmitsOptions {}
+export interface ImageCompareEmitsOptions {}
 
-export declare type ImageDiffEmits = EmitFn<ImageDiffEmitsOptions>;
+export declare type ImageCompareEmits = EmitFn<ImageCompareEmitsOptions>;
 
 /**
- * **PrimeVue - ImageDiff**
+ * **PrimeVue - ImageCompare**
  *
- * _ImageDiff_
+ * _ImageCompare_
  *
- * [Live Demo](https://www.primevue.org/imagediff/)
+ * [Live Demo](https://www.primevue.org/ImageCompare/)
  * --- ---
  * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
  *
  * @group Component
  *
  */
-declare const ImageDiff: DefineComponent<ImageDiffProps, ImageDiffSlots, ImageDiffEmits>;
+declare const ImageCompare: DefineComponent<ImageCompareProps, ImageCompareSlots, ImageCompareEmits>;
 
 declare module 'vue' {
     export interface GlobalComponents {
-        ImageDiff: GlobalComponentConstructor<ImageDiffProps, ImageDiffSlots, ImageDiffEmits>;
+        ImageCompare: GlobalComponentConstructor<ImageCompareProps, ImageCompareSlots, ImageCompareEmits>;
     }
 }
 
-export default ImageDiff;
+export default ImageCompare;
diff --git a/packages/primevue/src/imagecompare/ImageCompare.vue b/packages/primevue/src/imagecompare/ImageCompare.vue
new file mode 100644
index 000000000..ee7a28f2e
--- /dev/null
+++ b/packages/primevue/src/imagecompare/ImageCompare.vue
@@ -0,0 +1,26 @@
+<template>
+    <div :class="cx('root')" :pt="ptmi('root')">
+        <slot name="left"></slot>
+        <slot name="right"></slot>
+        <input type="range" min="0" max="100" value="50" @input="onSlide" :class="cx('slider')" :pt="ptm('slider')" />
+    </div>
+</template>
+
+<script>
+import BaseImageCompare from './BaseImageCompare.vue';
+
+export default {
+    name: 'ImageCompare',
+    extends: BaseImageCompare,
+    methods: {
+        onSlide(event) {
+            const value = event.target.value;
+            const image = event.target.previousElementSibling;
+
+            console.log(image);
+
+            image.style.clipPath = 'polygon(0 0,' + value + '% 0,' + value + '% 100%, 0 100%)';
+        }
+    }
+};
+</script>
diff --git a/packages/primevue/src/imagecompare/package.json b/packages/primevue/src/imagecompare/package.json
new file mode 100644
index 000000000..a7635db75
--- /dev/null
+++ b/packages/primevue/src/imagecompare/package.json
@@ -0,0 +1,11 @@
+{
+    "main": "./ImageCompare.vue",
+    "module": "./ImageCompare.vue",
+    "types": "./ImageCompare.d.ts",
+    "browser": {
+        "./sfc": "./ImageCompare.vue"
+    },
+    "sideEffects": [
+        "*.vue"
+    ]
+}
diff --git a/packages/primevue/src/imagediff/style/ImageDiffStyle.d.ts b/packages/primevue/src/imagecompare/style/ImageCompareStyle.d.ts
similarity index 100%
rename from packages/primevue/src/imagediff/style/ImageDiffStyle.d.ts
rename to packages/primevue/src/imagecompare/style/ImageCompareStyle.d.ts
diff --git a/packages/primevue/src/imagecompare/style/ImageCompareStyle.js b/packages/primevue/src/imagecompare/style/ImageCompareStyle.js
new file mode 100644
index 000000000..2c27d6c94
--- /dev/null
+++ b/packages/primevue/src/imagecompare/style/ImageCompareStyle.js
@@ -0,0 +1,62 @@
+import BaseStyle from '@primevue/core/base/style';
+
+const theme = ({ dt }) => `
+.p-imagecompare {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+}
+
+.p-imagecompare img {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+}
+
+.p-imagecompare img + img {
+    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
+}
+
+.p-imagecompare-slider {
+    position: relative;
+    -webkit-appearance: none;
+    width: calc(100% + 40px);
+    height: 100%;
+    margin-left: -20px;
+    background-color: transparent;
+    outline: none;
+}
+
+.p-imagecompare-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 45px;
+    width: 45px;
+    background: #ffffff33;
+    border: 3px solid #ffffff99;
+    border-radius: 50%;
+    background-size: contain;
+    cursor: ew-resize;
+}
+
+.p-imagecompare-slider::-moz-range-thumb {
+    height: 45px;
+    width: 45px;
+    background: #ffffff33;
+    border: 3px solid #ffffff99;
+    border-radius: 50%;
+    background-size: contain;
+    cursor: ew-resize;
+}
+`;
+
+const classes = {
+    root: 'p-imagecompare',
+    slider: 'p-imagecompare-slider'
+};
+
+export default BaseStyle.extend({
+    name: 'imagecompare',
+    theme,
+    classes
+});
diff --git a/packages/primevue/src/imagecompare/style/package.json b/packages/primevue/src/imagecompare/style/package.json
new file mode 100644
index 000000000..8ad30eda4
--- /dev/null
+++ b/packages/primevue/src/imagecompare/style/package.json
@@ -0,0 +1,6 @@
+{
+    "main": "./ImageCompareStyle.js",
+    "module": "./ImageCompareStyle.js",
+    "types": "./ImageCompareStyle.d.ts",
+    "sideEffects": false
+}
diff --git a/packages/primevue/src/imagediff/ImageDiff.vue b/packages/primevue/src/imagediff/ImageDiff.vue
deleted file mode 100644
index b81863309..000000000
--- a/packages/primevue/src/imagediff/ImageDiff.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-    <div :class="cx('root')" :pt="ptmi('root')">
-        <p :pt="ptm('container')">This feature is planned for the next phase.</p>
-    </div>
-</template>
-
-<script>
-import BaseImageDiff from './BaseImageDiff.vue';
-
-export default {
-    name: 'ImageDiff',
-    extends: BaseImageDiff
-};
-</script>
diff --git a/packages/primevue/src/imagediff/package.json b/packages/primevue/src/imagediff/package.json
deleted file mode 100644
index b8bee6b6f..000000000
--- a/packages/primevue/src/imagediff/package.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-    "main": "./ImageDiff.vue",
-    "module": "./ImageDiff.vue",
-    "types": "./ImageDiff.d.ts",
-    "browser": {
-        "./sfc": "./ImageDiff.vue"
-    },
-    "sideEffects": [
-        "*.vue"
-    ]
-}
diff --git a/packages/primevue/src/imagediff/style/ImageDiffStyle.js b/packages/primevue/src/imagediff/style/ImageDiffStyle.js
deleted file mode 100644
index d2f7631ba..000000000
--- a/packages/primevue/src/imagediff/style/ImageDiffStyle.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import BaseStyle from '@primevue/core/base/style';
-
-const theme = ({ dt }) => `
-.
-`;
-
-const classes = {
-    root: 'p-imagediff'
-};
-
-export default BaseStyle.extend({
-    name: 'imagediff',
-    theme,
-    classes
-});
diff --git a/packages/primevue/src/imagediff/style/package.json b/packages/primevue/src/imagediff/style/package.json
deleted file mode 100644
index 17660eec3..000000000
--- a/packages/primevue/src/imagediff/style/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-    "main": "./ImageDiffStyle.js",
-    "module": "./ImageDiffStyle.js",
-    "types": "./ImageDiffStyle.d.ts",
-    "sideEffects": false
-}
diff --git a/packages/themes/scripts/build-tokens.js b/packages/themes/scripts/build-tokens.js
index c9141dcf1..dd4455555 100644
--- a/packages/themes/scripts/build-tokens.js
+++ b/packages/themes/scripts/build-tokens.js
@@ -34,7 +34,7 @@ const THEME_COMPONENTS = [
     'IconField',
     'IftaLabel',
     'Image',
-    'ImageDiff',
+    'ImageCompare',
     'InlineMessage',
     'Inplace',
     'InputChips',
diff --git a/packages/themes/src/presets/aura/imagediff/index.js b/packages/themes/src/presets/aura/imagecompare/index.js
similarity index 100%
rename from packages/themes/src/presets/aura/imagediff/index.js
rename to packages/themes/src/presets/aura/imagecompare/index.js
diff --git a/packages/themes/src/presets/aura/imagediff/package.json b/packages/themes/src/presets/aura/imagecompare/package.json
similarity index 54%
rename from packages/themes/src/presets/aura/imagediff/package.json
rename to packages/themes/src/presets/aura/imagecompare/package.json
index b1aea50fa..eff82196e 100644
--- a/packages/themes/src/presets/aura/imagediff/package.json
+++ b/packages/themes/src/presets/aura/imagecompare/package.json
@@ -1,5 +1,5 @@
 {
     "main": "./index.js",
     "module": "./index.js",
-    "types": "../types/imagediff/index.d.ts"
+    "types": "../types/imagecompare/index.d.ts"
 }
diff --git a/packages/themes/src/presets/aura/index.js b/packages/themes/src/presets/aura/index.js
index 575ebea71..53d6b1c87 100644
--- a/packages/themes/src/presets/aura/index.js
+++ b/packages/themes/src/presets/aura/index.js
@@ -30,6 +30,7 @@ import galleria from '@primevue/themes/aura/galleria';
 import iconfield from '@primevue/themes/aura/iconfield';
 import iftalabel from '@primevue/themes/aura/iftalabel';
 import image from '@primevue/themes/aura/image';
+import imagecompare from '@primevue/themes/aura/imagecompare';
 import inlinemessage from '@primevue/themes/aura/inlinemessage';
 import inplace from '@primevue/themes/aura/inplace';
 import inputchips from '@primevue/themes/aura/inputchips';
@@ -120,6 +121,7 @@ export default {
         galleria,
         iconfield,
         image,
+        imagecompare,
         inlinemessage,
         inplace,
         inputchips,