diff --git a/playwright/core/mountFixture.tsx b/playwright/core/mountFixture.tsx
index 0c285050cf..988c88c412 100644
--- a/playwright/core/mountFixture.tsx
+++ b/playwright/core/mountFixture.tsx
@@ -1,23 +1,19 @@
 import React from 'react';
 
-import type {JsonObject} from '@playwright/experimental-ct-core/types/component';
-import type {MountOptions} from '@playwright/experimental-ct-react';
-
 import type {MountFixture, PlaywrightFixture} from './types';
 
 export const mountFixture: PlaywrightFixture<MountFixture> = async ({mount: baseMount}, use) => {
-    const mount = async (
-        component: JSX.Element,
-        options?: MountOptions<JsonObject> | undefined,
-    ) => {
+    const mount: MountFixture = async (component, options) => {
+        const {wrapDivStyles, ...restOptions} = options || {};
+
         return await baseMount(
             <div
-                style={{padding: 20, width: 'fit-content', height: 'fit-content'}}
+                style={{padding: 20, width: 'fit-content', height: 'fit-content', ...wrapDivStyles}}
                 className="playwright-wrapper-test"
             >
                 {component}
             </div>,
-            options,
+            restOptions,
         );
     };
 
diff --git a/playwright/core/types.ts b/playwright/core/types.ts
index 9a4c6d6862..4487ecc002 100644
--- a/playwright/core/types.ts
+++ b/playwright/core/types.ts
@@ -1,3 +1,5 @@
+import type React from 'react';
+
 import type {JsonObject} from '@playwright/experimental-ct-core/types/component';
 import type {MountOptions, MountResult} from '@playwright/experimental-ct-react';
 import type {
@@ -13,7 +15,7 @@ import type {
 interface ComponentFixtures {
     mount<HooksConfig extends JsonObject>(
         component: JSX.Element,
-        options?: MountOptions<HooksConfig>,
+        options?: MountOptions<HooksConfig> & {wrapDivStyles?: React.CSSProperties},
     ): Promise<MountResult>;
 }
 
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValues-dark-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValues-dark-chromium-linux.png
new file mode 100644
index 0000000000..680814a64e
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValues-dark-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValues-dark-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValues-dark-webkit-linux.png
new file mode 100644
index 0000000000..22ec8eda34
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValues-dark-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValues-light-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValues-light-chromium-linux.png
new file mode 100644
index 0000000000..ca6705b81d
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValues-light-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValues-light-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValues-light-webkit-linux.png
new file mode 100644
index 0000000000..ac63a246f6
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValues-light-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValuesRange-dark-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValuesRange-dark-chromium-linux.png
new file mode 100644
index 0000000000..1006dd9592
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValuesRange-dark-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValuesRange-dark-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValuesRange-dark-webkit-linux.png
new file mode 100644
index 0000000000..da5d8aad56
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValuesRange-dark-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValuesRange-light-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValuesRange-light-chromium-linux.png
new file mode 100644
index 0000000000..0f159fc4fd
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValuesRange-light-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValuesRange-light-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValuesRange-light-webkit-linux.png
new file mode 100644
index 0000000000..1c7f466f34
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-AvailableValuesRange-light-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Default-dark-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Default-dark-chromium-linux.png
new file mode 100644
index 0000000000..00f28d0de8
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Default-dark-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Default-dark-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Default-dark-webkit-linux.png
new file mode 100644
index 0000000000..ce58dd5335
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Default-dark-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Default-light-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Default-light-chromium-linux.png
new file mode 100644
index 0000000000..9b702d836f
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Default-light-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Default-light-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Default-light-webkit-linux.png
new file mode 100644
index 0000000000..e71e329345
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Default-light-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DefaultRange-dark-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DefaultRange-dark-chromium-linux.png
new file mode 100644
index 0000000000..f4cc69c7b3
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DefaultRange-dark-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DefaultRange-dark-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DefaultRange-dark-webkit-linux.png
new file mode 100644
index 0000000000..c35d1ab276
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DefaultRange-dark-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DefaultRange-light-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DefaultRange-light-chromium-linux.png
new file mode 100644
index 0000000000..224972e87e
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DefaultRange-light-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DefaultRange-light-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DefaultRange-light-webkit-linux.png
new file mode 100644
index 0000000000..bb7d96b267
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DefaultRange-light-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Disabled-dark-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Disabled-dark-chromium-linux.png
new file mode 100644
index 0000000000..c3d080c3af
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Disabled-dark-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Disabled-dark-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Disabled-dark-webkit-linux.png
new file mode 100644
index 0000000000..088f9c8257
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Disabled-dark-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Disabled-light-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Disabled-light-chromium-linux.png
new file mode 100644
index 0000000000..d8ead4f45e
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Disabled-light-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Disabled-light-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Disabled-light-webkit-linux.png
new file mode 100644
index 0000000000..6f133a0a9e
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Disabled-light-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DisabledRange-dark-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DisabledRange-dark-chromium-linux.png
new file mode 100644
index 0000000000..71ed3888ea
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DisabledRange-dark-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DisabledRange-dark-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DisabledRange-dark-webkit-linux.png
new file mode 100644
index 0000000000..697df8578f
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DisabledRange-dark-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DisabledRange-light-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DisabledRange-light-chromium-linux.png
new file mode 100644
index 0000000000..67721d9d55
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DisabledRange-light-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DisabledRange-light-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DisabledRange-light-webkit-linux.png
new file mode 100644
index 0000000000..21e1141f9d
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-DisabledRange-light-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Error-dark-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Error-dark-chromium-linux.png
new file mode 100644
index 0000000000..90e49ea722
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Error-dark-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Error-dark-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Error-dark-webkit-linux.png
new file mode 100644
index 0000000000..1b6fe35303
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Error-dark-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Error-light-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Error-light-chromium-linux.png
new file mode 100644
index 0000000000..bf5e3ed657
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Error-light-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Error-light-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Error-light-webkit-linux.png
new file mode 100644
index 0000000000..2df5577927
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Error-light-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-ErrorRange-dark-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-ErrorRange-dark-chromium-linux.png
new file mode 100644
index 0000000000..550216d939
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-ErrorRange-dark-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-ErrorRange-dark-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-ErrorRange-dark-webkit-linux.png
new file mode 100644
index 0000000000..9e24a842bd
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-ErrorRange-dark-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-ErrorRange-light-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-ErrorRange-light-chromium-linux.png
new file mode 100644
index 0000000000..c8f640a35f
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-ErrorRange-light-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-ErrorRange-light-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-ErrorRange-light-webkit-linux.png
new file mode 100644
index 0000000000..dc8cdfc0a7
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-ErrorRange-light-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCount-dark-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCount-dark-chromium-linux.png
new file mode 100644
index 0000000000..f6da87ce12
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCount-dark-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCount-dark-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCount-dark-webkit-linux.png
new file mode 100644
index 0000000000..f91bdefaec
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCount-dark-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCount-light-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCount-light-chromium-linux.png
new file mode 100644
index 0000000000..d6205e85df
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCount-light-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCount-light-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCount-light-webkit-linux.png
new file mode 100644
index 0000000000..f510044e4c
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCount-light-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCountRange-dark-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCountRange-dark-chromium-linux.png
new file mode 100644
index 0000000000..685aaf4e02
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCountRange-dark-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCountRange-dark-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCountRange-dark-webkit-linux.png
new file mode 100644
index 0000000000..528bd9c390
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCountRange-dark-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCountRange-light-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCountRange-light-chromium-linux.png
new file mode 100644
index 0000000000..508811fa96
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCountRange-light-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCountRange-light-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCountRange-light-webkit-linux.png
new file mode 100644
index 0000000000..bd7be7ac86
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-MarksCountRange-light-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Size-dark-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Size-dark-chromium-linux.png
new file mode 100644
index 0000000000..a6e1b33c2d
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Size-dark-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Size-dark-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Size-dark-webkit-linux.png
new file mode 100644
index 0000000000..9edb7b375c
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Size-dark-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Size-light-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Size-light-chromium-linux.png
new file mode 100644
index 0000000000..bef876f50a
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Size-light-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Size-light-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Size-light-webkit-linux.png
new file mode 100644
index 0000000000..cde0000e58
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Size-light-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-SizeRange-dark-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-SizeRange-dark-chromium-linux.png
new file mode 100644
index 0000000000..75f7b3c0e1
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-SizeRange-dark-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-SizeRange-dark-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-SizeRange-dark-webkit-linux.png
new file mode 100644
index 0000000000..bf488f364f
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-SizeRange-dark-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-SizeRange-light-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-SizeRange-light-chromium-linux.png
new file mode 100644
index 0000000000..1de910ddaa
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-SizeRange-light-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-SizeRange-light-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-SizeRange-light-webkit-linux.png
new file mode 100644
index 0000000000..5fd6b254ee
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-SizeRange-light-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Tooltip-dark-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Tooltip-dark-chromium-linux.png
new file mode 100644
index 0000000000..20835663de
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Tooltip-dark-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Tooltip-dark-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Tooltip-dark-webkit-linux.png
new file mode 100644
index 0000000000..91f07d08f6
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Tooltip-dark-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Tooltip-light-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Tooltip-light-chromium-linux.png
new file mode 100644
index 0000000000..e5f168988e
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Tooltip-light-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Tooltip-light-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Tooltip-light-webkit-linux.png
new file mode 100644
index 0000000000..bb77e3f4d2
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-Tooltip-light-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-TooltipRange-dark-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-TooltipRange-dark-chromium-linux.png
new file mode 100644
index 0000000000..bed5c61d94
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-TooltipRange-dark-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-TooltipRange-dark-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-TooltipRange-dark-webkit-linux.png
new file mode 100644
index 0000000000..e55bb78a48
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-TooltipRange-dark-webkit-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-TooltipRange-light-chromium-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-TooltipRange-light-chromium-linux.png
new file mode 100644
index 0000000000..3b85e708cb
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-TooltipRange-light-chromium-linux.png differ
diff --git a/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-TooltipRange-light-webkit-linux.png b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-TooltipRange-light-webkit-linux.png
new file mode 100644
index 0000000000..9d23a2fa5a
Binary files /dev/null and b/src/components/Slider/__snapshots__/Slider.visual.test.tsx-snapshots/Slider-render-story-TooltipRange-light-webkit-linux.png differ
diff --git a/src/components/Slider/__stories__/Slider.stories.tsx b/src/components/Slider/__stories__/Slider.stories.tsx
index 988f4c9a3d..4966090e8f 100644
--- a/src/components/Slider/__stories__/Slider.stories.tsx
+++ b/src/components/Slider/__stories__/Slider.stories.tsx
@@ -1,10 +1,13 @@
 import React from 'react';
 
+import {action} from '@storybook/addon-actions';
+import {useArgs} from '@storybook/preview-api';
 import type {Meta, StoryObj} from '@storybook/react';
 
+import {Showcase} from '../../../demo/Showcase';
+import {ShowcaseItem} from '../../../demo/ShowcaseItem';
 import {Slider} from '../Slider';
-
-import {SliderShowcase} from './SliderShowcase';
+import type {SliderProps, SliderValue} from '../types';
 
 type Story = StoryObj<typeof Slider>;
 
@@ -14,6 +17,21 @@ export default {
     args: {
         'aria-label': 'Example slider field',
     },
+    decorators: [
+        function useTextValue(Story, ctx) {
+            const [, setArgs] = useArgs<typeof ctx.args>();
+
+            const handleUpdate = (value: SliderValue) => {
+                if (ctx.args.value !== undefined) {
+                    setArgs({
+                        value,
+                    });
+                }
+            };
+
+            return <Story args={{...ctx.args, onUpdate: handleUpdate}} />;
+        },
+    ],
     parameters: {
         a11y: {
             element: '#storybook-root',
@@ -29,10 +47,135 @@ export default {
     },
 } as Meta<typeof Slider>;
 
-export const Default: Story = {};
+export const Default: Story = {
+    args: {
+        value: 20,
+        min: 0,
+        max: 100,
+        step: 1,
+        onFocus: action('onFocus'),
+        onBlur: action('onBlur'),
+        onUpdate: action('onUpdate'),
+        onUpdateComplete: action('onUpdateComplete'),
+    },
+};
 
-export const Showcase: Story = {
-    render: (args) => {
-        return <SliderShowcase {...args} />;
+export const DefaultRange: Story = {
+    args: {
+        ...Default.args,
+        value: [20, 80],
+    },
+    name: 'Default (for range value)',
+};
+
+const sizeCases: Array<NonNullable<SliderProps['size']>> = ['s', 'm', 'l', 'xl'];
+
+export const Size: Story = {
+    render: (args) => (
+        <Showcase isVertical>
+            {sizeCases.map((size, index) => (
+                <ShowcaseItem title={size} key={index}>
+                    <Slider {...args} size={size} />
+                </ShowcaseItem>
+            ))}
+        </Showcase>
+    ),
+    args: {
+        ...Default.args,
+    },
+};
+
+export const SizeRange: Story = {
+    render: (args) => (
+        <Showcase isVertical>
+            {sizeCases.map((size, index) => (
+                <ShowcaseItem title={size} key={index}>
+                    <Slider {...args} size={size} />
+                </ShowcaseItem>
+            ))}
+        </Showcase>
+    ),
+    args: {
+        ...DefaultRange.args,
+    },
+    name: 'Size (for range value)',
+};
+
+export const Disabled: Story = {
+    args: {
+        ...Default.args,
+        disabled: true,
+    },
+};
+
+export const DisabledRange: Story = {
+    args: {
+        ...DefaultRange.args,
+        disabled: true,
+    },
+    name: 'Disabled (for range value)',
+};
+
+export const Error: Story = {
+    args: {
+        ...Default.args,
+        errorMessage: 'Error message',
+        validationState: 'invalid',
+    },
+};
+
+export const ErrorRange: Story = {
+    args: {
+        ...DefaultRange.args,
+        errorMessage: 'Error message',
+        validationState: 'invalid',
+    },
+    name: 'Error (for range value)',
+};
+
+export const Tooltip: Story = {
+    args: {
+        ...Default.args,
+        hasTooltip: true,
+    },
+};
+
+export const TooltipRange: Story = {
+    args: {
+        ...DefaultRange.args,
+        hasTooltip: true,
+    },
+    name: 'Tooltip (for range value)',
+};
+
+export const MarksCount: Story = {
+    args: {
+        ...Default.args,
+        marksCount: 11,
+    },
+    name: 'Marks count',
+};
+
+export const MarksCountRange: Story = {
+    args: {
+        ...DefaultRange.args,
+        marksCount: 11,
+    },
+    name: 'Marks count (for range value)',
+};
+
+export const AvailableValues: Story = {
+    args: {
+        ...Default.args,
+        availableValues: [10, 20, 50, 55, 65, 80],
+    },
+    name: 'Available values',
+};
+
+export const AvailableValuesRange: Story = {
+    args: {
+        ...DefaultRange.args,
+        availableValues: [10, 20, 50, 55, 65, 80],
     },
+    name: 'Available values (for range value)',
 };
diff --git a/src/components/Slider/__stories__/SliderShowcase.scss b/src/components/Slider/__stories__/SliderShowcase.scss
deleted file mode 100644
index 1645125920..0000000000
--- a/src/components/Slider/__stories__/SliderShowcase.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@use '../../variables';
-
-$block: '.#{variables.$ns}slider-showcase';
-
-#{$block} {
-    display: grid;
-    gap: 50px;
-    padding: 0 40px;
-
-    &__block {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 60px;
-        width: 100%;
-    }
-
-    &__row {
-        display: grid;
-        gap: 20px;
-        grid-template-columns: 20px auto;
-        margin-block-end: 5px;
-    }
-}
diff --git a/src/components/Slider/__stories__/SliderShowcase.tsx b/src/components/Slider/__stories__/SliderShowcase.tsx
deleted file mode 100644
index e460b6aa2f..0000000000
--- a/src/components/Slider/__stories__/SliderShowcase.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import React from 'react';
-
-import {Showcase} from '../../../demo/Showcase';
-import {ShowcaseItem} from '../../../demo/ShowcaseItem';
-import {block} from '../../utils/cn';
-import {Slider} from '../Slider';
-import type {SliderProps} from '../types';
-
-import './SliderShowcase.scss';
-
-const b = block('slider-showcase');
-const blockCn = b('block');
-const rowCn = b('row');
-
-const ShowcaseBlock = ({title, ...sliderProps}: Partial<SliderProps> & {title: string}) => {
-    const sliderLabel = `${title} slider example`;
-
-    return (
-        <ShowcaseItem title={title}>
-            <div className={rowCn}>
-                <div>s:</div>
-                <Slider size="s" aria-label={sliderLabel} {...sliderProps} />
-            </div>
-            <div className={rowCn}>
-                <div>m:</div>
-                <Slider size="m" aria-label={sliderLabel} {...sliderProps} />
-            </div>
-            <div className={rowCn}>
-                <div>l:</div>
-                <Slider size="l" aria-label={sliderLabel} {...sliderProps} />
-            </div>
-            <div className={rowCn}>
-                <div>xl:</div>
-                <Slider size="xl" aria-label={sliderLabel} {...sliderProps} />
-            </div>
-        </ShowcaseItem>
-    );
-};
-
-export const SliderShowcase = () => {
-    return (
-        <Showcase className={b()}>
-            <div className={blockCn}>
-                <ShowcaseBlock title="size" defaultValue={20} />
-                <ShowcaseBlock title="Range size" defaultValue={[20, 40]} />
-            </div>
-            <div className={blockCn}>
-                <ShowcaseBlock title="disabled" disabled defaultValue={20} />
-                <ShowcaseBlock title="Range disabled" disabled defaultValue={[20, 40]} />
-            </div>
-            <div className={blockCn}>
-                <ShowcaseBlock
-                    title="error"
-                    errorMessage="Error description"
-                    validationState="invalid"
-                    defaultValue={20}
-                />
-                <ShowcaseBlock
-                    title="Range error"
-                    errorMessage="Error description"
-                    validationState="invalid"
-                    defaultValue={[20, 40]}
-                />
-            </div>
-            <div className={blockCn}>
-                <ShowcaseBlock title="tooltip" hasTooltip defaultValue={20} />
-                <ShowcaseBlock title="Range tooltip" hasTooltip defaultValue={[20, 40]} />
-            </div>
-            <div className={blockCn}>
-                <ShowcaseBlock title="tooltip disabled" hasTooltip disabled defaultValue={20} />
-                <ShowcaseBlock
-                    title="Range tooltip disabled"
-                    hasTooltip
-                    disabled
-                    defaultValue={[20, 40]}
-                />
-            </div>
-            <div className={blockCn}>
-                <ShowcaseBlock
-                    title="tooltip error"
-                    hasTooltip
-                    errorMessage="Error description"
-                    validationState="invalid"
-                    defaultValue={20}
-                />
-                <ShowcaseBlock
-                    title="Range tooltip error"
-                    hasTooltip
-                    errorMessage="Error description"
-                    validationState="invalid"
-                    defaultValue={[20, 40]}
-                />
-            </div>
-            <div className={blockCn}>
-                <ShowcaseBlock title="marksCount" marksCount={11} defaultValue={20} />
-                <ShowcaseBlock title="Range marksCount" marksCount={11} defaultValue={[20, 40]} />
-            </div>
-            <div className={blockCn}>
-                <ShowcaseBlock
-                    title="availableValues"
-                    availableValues={[10, 20, 50, 55, 65, 80]}
-                    defaultValue={20}
-                />
-                <ShowcaseBlock
-                    title="Range availableValues"
-                    availableValues={[10, 20, 50, 55, 65, 80]}
-                    defaultValue={[20, 50]}
-                />
-            </div>
-        </Showcase>
-    );
-};
diff --git a/src/components/Slider/__tests__/Slider.visual.test.tsx b/src/components/Slider/__tests__/Slider.visual.test.tsx
new file mode 100644
index 0000000000..17043e22d4
--- /dev/null
+++ b/src/components/Slider/__tests__/Slider.visual.test.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+
+import {test} from '~playwright/core';
+
+import {SliderStories} from './helpersPlaywright';
+
+const mountOptions = {
+    wrapDivStyles: {
+        minWidth: 300,
+    },
+};
+
+test.describe('Slider', () => {
+    test('render story: <Default>', async ({mount, expectScreenshot}) => {
+        await mount(<SliderStories.Default />, mountOptions);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <DefaultRange>', async ({mount, expectScreenshot}) => {
+        await mount(<SliderStories.DefaultRange />, mountOptions);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <Size>', async ({mount, expectScreenshot}) => {
+        await mount(<SliderStories.Size />, mountOptions);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <SizeRange>', async ({mount, expectScreenshot}) => {
+        await mount(<SliderStories.SizeRange />, mountOptions);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <Disabled>', async ({mount, expectScreenshot}) => {
+        await mount(<SliderStories.Disabled />, mountOptions);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <DisabledRange>', async ({mount, expectScreenshot}) => {
+        await mount(<SliderStories.DisabledRange />, mountOptions);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <Error>', async ({mount, expectScreenshot}) => {
+        await mount(<SliderStories.Error />, mountOptions);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <ErrorRange>', async ({mount, expectScreenshot}) => {
+        await mount(<SliderStories.ErrorRange />, mountOptions);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <Tooltip>', async ({mount, expectScreenshot}) => {
+        await mount(<SliderStories.Tooltip />, mountOptions);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <TooltipRange>', async ({mount, expectScreenshot}) => {
+        await mount(<SliderStories.TooltipRange />, mountOptions);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <MarksCount>', async ({mount, expectScreenshot}) => {
+        await mount(<SliderStories.MarksCount />, mountOptions);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <MarksCountRange>', async ({mount, expectScreenshot}) => {
+        await mount(<SliderStories.MarksCountRange />, mountOptions);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <AvailableValues>', async ({mount, expectScreenshot}) => {
+        await mount(<SliderStories.AvailableValues />, mountOptions);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <AvailableValuesRange>', async ({mount, expectScreenshot}) => {
+        await mount(<SliderStories.AvailableValuesRange />, mountOptions);
+
+        await expectScreenshot();
+    });
+});
diff --git a/src/components/Slider/__tests__/helpersPlaywright.tsx b/src/components/Slider/__tests__/helpersPlaywright.tsx
new file mode 100644
index 0000000000..9ebb601953
--- /dev/null
+++ b/src/components/Slider/__tests__/helpersPlaywright.tsx
@@ -0,0 +1,5 @@
+import {composeStories} from '@storybook/react';
+
+import * as DefaultSliderStories from '../__stories__/Slider.stories';
+
+export const SliderStories = composeStories(DefaultSliderStories);
diff --git a/src/demo/Showcase/Showcase.scss b/src/demo/Showcase/Showcase.scss
index b8c47be1c2..ae6ac172ce 100644
--- a/src/demo/Showcase/Showcase.scss
+++ b/src/demo/Showcase/Showcase.scss
@@ -24,6 +24,10 @@
         flex-wrap: wrap;
         gap: var(--g-spacing-6);
 
+        &_isVertical {
+            flex-direction: column;
+        }
+
         &:not(:only-child) {
             margin-block-start: var(--g-spacing-5);
         }
diff --git a/src/demo/Showcase/Showcase.tsx b/src/demo/Showcase/Showcase.tsx
index 486c70ccf0..225e2a78a1 100644
--- a/src/demo/Showcase/Showcase.tsx
+++ b/src/demo/Showcase/Showcase.tsx
@@ -8,16 +8,17 @@ type Props = React.PropsWithChildren<{
     title?: string;
     description?: React.ReactNode;
     className?: string;
+    isVertical?: boolean;
 }>;
 
 const b = cn('showcase');
 
-export function Showcase({title, description, className, children}: Props) {
+export function Showcase({title, description, className, children, isVertical}: Props) {
     return (
         <div className={b(null, className)}>
             {title && <div className={b('title')}>{title}</div>}
             {description && <div className={b('description')}>{description}</div>}
-            <div className={b('content')}>{children}</div>
+            <div className={b('content', {isVertical})}>{children}</div>
         </div>
     );
 }