diff --git a/05-calendar-range-correct-display-defaults-items-and-values.png b/05-calendar-range-correct-display-defaults-items-and-values.png
new file mode 100644
index 000000000000..ea92ce88014b
Binary files /dev/null and b/05-calendar-range-correct-display-defaults-items-and-values.png differ
diff --git a/05-calendar-range-correct-display-items-and-values-after-click-on-month-range-switcher.png b/05-calendar-range-correct-display-items-and-values-after-click-on-month-range-switcher.png
new file mode 100644
index 000000000000..42aacda20b56
Binary files /dev/null and b/05-calendar-range-correct-display-items-and-values-after-click-on-month-range-switcher.png differ
diff --git a/05-calendar-range-correct-display-items-and-values-after-click-on-quarter-range-switcher.png b/05-calendar-range-correct-display-items-and-values-after-click-on-quarter-range-switcher.png
new file mode 100644
index 000000000000..3445edb7713c
Binary files /dev/null and b/05-calendar-range-correct-display-items-and-values-after-click-on-quarter-range-switcher.png differ
diff --git a/05-calendar-range-correct-display-range-switcher-after-select-week.png b/05-calendar-range-correct-display-range-switcher-after-select-week.png
new file mode 100644
index 000000000000..27c1801d8a7f
Binary files /dev/null and b/05-calendar-range-correct-display-range-switcher-after-select-week.png differ
diff --git a/projects/demo-playwright/tests/kit/calendar-range/calendar-range.spec.ts b/projects/demo-playwright/tests/kit/calendar-range/calendar-range.spec.ts
new file mode 100644
index 000000000000..bd57ecb848d9
--- /dev/null
+++ b/projects/demo-playwright/tests/kit/calendar-range/calendar-range.spec.ts
@@ -0,0 +1,57 @@
+import {DemoRoute} from '@demo/routes';
+import {
+    TuiCalendarRangePO,
+    TuiDocumentationPagePO,
+    tuiGoto,
+} from '@demo-playwright/utils';
+import {expect, type Locator, test} from '@playwright/test';
+
+test.describe('CalendarRange', () => {
+    let example!: Locator;
+    let calendarRange!: TuiCalendarRangePO;
+    let documentationPage!: TuiDocumentationPagePO;
+
+    test.beforeEach(async ({page}) => {
+        await tuiGoto(page, DemoRoute.CalendarRange, {date: new Date(2024, 9, 31)});
+
+        documentationPage = new TuiDocumentationPagePO(page);
+        example = documentationPage.getExample('#with-another-range-switcher');
+        calendarRange = new TuiCalendarRangePO(example.locator('tui-calendar-range'));
+    });
+
+    test.describe('Examples', () => {
+        test('With another range switcher', async () => {
+            const getRangeSwitcher = (): Locator =>
+                example.locator('p button[data-appearance="link"]');
+
+            await expect(example).toHaveScreenshot(
+                '05-calendar-range-correct-display-defaults-items-and-values.png',
+            );
+
+            await calendarRange.selectItem(1);
+            await calendarRange.itemHasCheckmark(1);
+
+            await expect(example).toHaveScreenshot(
+                '05-calendar-range-correct-display-range-switcher-after-select-week.png',
+            );
+
+            getRangeSwitcher().click();
+
+            await expect(example).toHaveScreenshot(
+                '05-calendar-range-correct-display-items-and-values-after-click-on-month-range-switcher.png',
+            );
+
+            getRangeSwitcher().click();
+
+            await expect(example).toHaveScreenshot(
+                '05-calendar-range-correct-display-items-and-values-after-click-on-quarter-range-switcher.png',
+            );
+
+            getRangeSwitcher().click();
+
+            await expect(example).toHaveScreenshot(
+                '05-calendar-range-correct-display-defaults-items-and-values.png',
+            );
+        });
+    });
+});
diff --git a/projects/demo-playwright/utils/page-objects/calendar-range.po.ts b/projects/demo-playwright/utils/page-objects/calendar-range.po.ts
new file mode 100644
index 000000000000..2880d0e8642d
--- /dev/null
+++ b/projects/demo-playwright/utils/page-objects/calendar-range.po.ts
@@ -0,0 +1,29 @@
+import {expect, type Locator} from '@playwright/test';
+
+export class TuiCalendarRangePO {
+    constructor(private readonly host: Locator) {}
+
+    public async getItems(): Promise<Locator[]> {
+        const dataList = this.host.locator('[automation-id="tui-calendar-range__menu"]');
+
+        await expect(dataList).toBeAttached();
+
+        return dataList.locator('[tuiOption]').all();
+    }
+
+    public async selectItem(index: number): Promise<void> {
+        const items = await this.getItems();
+
+        await items[index].click();
+    }
+
+    public async itemHasCheckmark(index: number): Promise<boolean> {
+        const items = await this.getItems();
+
+        const itemCheckmark = await items[index]
+            .locator('[automation-id="tui-calendar-range__checkmark"]')
+            .count();
+
+        return !!itemCheckmark;
+    }
+}
diff --git a/projects/demo-playwright/utils/page-objects/index.ts b/projects/demo-playwright/utils/page-objects/index.ts
index 1405cca49aa9..0609a995a190 100644
--- a/projects/demo-playwright/utils/page-objects/index.ts
+++ b/projects/demo-playwright/utils/page-objects/index.ts
@@ -1,4 +1,5 @@
 export * from './calendar.po';
+export * from './calendar-range.po';
 export * from './combo-box.po';
 export * from './documentation-api-page.po';
 export * from './documentation-page.po';