diff --git a/src/elements/slider/__snapshots__/slider.snapshot.spec.snap.js b/src/elements/slider/__snapshots__/slider.snapshot.spec.snap.js
index 64bdb04f29..904233456d 100644
--- a/src/elements/slider/__snapshots__/slider.snapshot.spec.snap.js
+++ b/src/elements/slider/__snapshots__/slider.snapshot.spec.snap.js
@@ -1,7 +1,7 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-slider should render DOM"] = 
+snapshots["sbb-slider renders DOM"] = 
 `<sbb-slider
   aria-valuemax="100"
   aria-valuemin="0"
@@ -13,9 +13,9 @@ snapshots["sbb-slider should render DOM"] =
 >
 </sbb-slider>
 `;
-/* end snapshot sbb-slider should render DOM */
+/* end snapshot sbb-slider renders DOM */
 
-snapshots["sbb-slider should render Shadow DOM"] = 
+snapshots["sbb-slider renders Shadow DOM"] = 
 `<div class="sbb-slider__height-container">
   <div class="sbb-slider__wrapper">
     <slot name="prefix">
@@ -44,30 +44,9 @@ snapshots["sbb-slider should render Shadow DOM"] =
   </div>
 </div>
 `;
-/* end snapshot sbb-slider should render Shadow DOM */
+/* end snapshot sbb-slider renders Shadow DOM */
 
-snapshots["sbb-slider should render A11y tree Chrome"] = 
-`<p>
-  {
-  "role": "WebArea",
-  "name": "",
-  "children": [
-    {
-      "role": "slider",
-      "name": "",
-      "valuetext": "",
-      "valuemin": 0,
-      "valuemax": 100,
-      "orientation": "horizontal",
-      "value": 1
-    }
-  ]
-}
-</p>
-`;
-/* end snapshot sbb-slider should render A11y tree Chrome */
-
-snapshots["sbb-slider should render with properties DOM"] = 
+snapshots["sbb-slider renders with properties DOM"] = 
 `<sbb-slider
   aria-valuemax="500"
   aria-valuemin="0"
@@ -83,9 +62,9 @@ snapshots["sbb-slider should render with properties DOM"] =
 >
 </sbb-slider>
 `;
-/* end snapshot sbb-slider should render with properties DOM */
+/* end snapshot sbb-slider renders with properties DOM */
 
-snapshots["sbb-slider should render with properties Shadow DOM"] = 
+snapshots["sbb-slider renders with properties Shadow DOM"] = 
 `<div class="sbb-slider__height-container">
   <div class="sbb-slider__wrapper">
     <slot name="prefix">
@@ -128,30 +107,9 @@ snapshots["sbb-slider should render with properties Shadow DOM"] =
   </div>
 </div>
 `;
-/* end snapshot sbb-slider should render with properties Shadow DOM */
-
-snapshots["sbb-slider should render with properties A11y tree Chrome"] = 
-`<p>
-  {
-  "role": "WebArea",
-  "name": "",
-  "children": [
-    {
-      "role": "slider",
-      "name": "",
-      "valuetext": "",
-      "valuemin": 0,
-      "valuemax": 500,
-      "orientation": "horizontal",
-      "value": 100
-    }
-  ]
-}
-</p>
-`;
-/* end snapshot sbb-slider should render with properties A11y tree Chrome */
+/* end snapshot sbb-slider renders with properties Shadow DOM */
 
-snapshots["sbb-slider should render disabled DOM"] = 
+snapshots["sbb-slider renders disabled DOM"] = 
 `<sbb-slider
   aria-disabled="true"
   aria-valuemax="500"
@@ -168,9 +126,9 @@ snapshots["sbb-slider should render disabled DOM"] =
 >
 </sbb-slider>
 `;
-/* end snapshot sbb-slider should render disabled DOM */
+/* end snapshot sbb-slider renders disabled DOM */
 
-snapshots["sbb-slider should render disabled Shadow DOM"] = 
+snapshots["sbb-slider renders disabled Shadow DOM"] = 
 `<div class="sbb-slider__height-container">
   <div class="sbb-slider__wrapper">
     <slot name="prefix">
@@ -214,31 +172,9 @@ snapshots["sbb-slider should render disabled Shadow DOM"] =
   </div>
 </div>
 `;
-/* end snapshot sbb-slider should render disabled Shadow DOM */
-
-snapshots["sbb-slider should render disabled A11y tree Chrome"] = 
-`<p>
-  {
-  "role": "WebArea",
-  "name": "",
-  "children": [
-    {
-      "role": "slider",
-      "name": "",
-      "valuetext": "",
-      "disabled": true,
-      "valuemin": 0,
-      "valuemax": 500,
-      "orientation": "horizontal",
-      "value": 100
-    }
-  ]
-}
-</p>
-`;
-/* end snapshot sbb-slider should render disabled A11y tree Chrome */
+/* end snapshot sbb-slider renders disabled Shadow DOM */
 
-snapshots["sbb-slider should render readonly DOM"] = 
+snapshots["sbb-slider renders readonly DOM"] = 
 `<sbb-slider
   aria-readonly="true"
   aria-valuemax="500"
@@ -256,9 +192,9 @@ snapshots["sbb-slider should render readonly DOM"] =
 >
 </sbb-slider>
 `;
-/* end snapshot sbb-slider should render readonly DOM */
+/* end snapshot sbb-slider renders readonly DOM */
 
-snapshots["sbb-slider should render readonly Shadow DOM"] = 
+snapshots["sbb-slider renders readonly Shadow DOM"] = 
 `<div class="sbb-slider__height-container">
   <div class="sbb-slider__wrapper">
     <slot name="prefix">
@@ -302,9 +238,73 @@ snapshots["sbb-slider should render readonly Shadow DOM"] =
   </div>
 </div>
 `;
-/* end snapshot sbb-slider should render readonly Shadow DOM */
+/* end snapshot sbb-slider renders readonly Shadow DOM */
+
+snapshots["sbb-slider renders A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "slider",
+      "name": "",
+      "valuetext": "",
+      "valuemin": 0,
+      "valuemax": 100,
+      "orientation": "horizontal",
+      "value": 1
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-slider renders A11y tree Chrome */
+
+snapshots["sbb-slider renders with properties A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "slider",
+      "name": "",
+      "valuetext": "",
+      "valuemin": 0,
+      "valuemax": 500,
+      "orientation": "horizontal",
+      "value": 100
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-slider renders with properties A11y tree Chrome */
+
+snapshots["sbb-slider renders disabled A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "slider",
+      "name": "",
+      "valuetext": "",
+      "disabled": true,
+      "valuemin": 0,
+      "valuemax": 500,
+      "orientation": "horizontal",
+      "value": 100
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-slider renders disabled A11y tree Chrome */
 
-snapshots["sbb-slider should render readonly A11y tree Chrome"] = 
+snapshots["sbb-slider renders readonly A11y tree Chrome"] = 
 `<p>
   {
   "role": "WebArea",
@@ -323,9 +323,9 @@ snapshots["sbb-slider should render readonly A11y tree Chrome"] =
 }
 </p>
 `;
-/* end snapshot sbb-slider should render readonly A11y tree Chrome */
+/* end snapshot sbb-slider renders readonly A11y tree Chrome */
 
-snapshots["sbb-slider should render A11y tree Firefox"] = 
+snapshots["sbb-slider renders A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
@@ -341,9 +341,9 @@ snapshots["sbb-slider should render A11y tree Firefox"] =
 }
 </p>
 `;
-/* end snapshot sbb-slider should render A11y tree Firefox */
+/* end snapshot sbb-slider renders A11y tree Firefox */
 
-snapshots["sbb-slider should render with properties A11y tree Firefox"] = 
+snapshots["sbb-slider renders with properties A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
@@ -359,9 +359,9 @@ snapshots["sbb-slider should render with properties A11y tree Firefox"] =
 }
 </p>
 `;
-/* end snapshot sbb-slider should render with properties A11y tree Firefox */
+/* end snapshot sbb-slider renders with properties A11y tree Firefox */
 
-snapshots["sbb-slider should render disabled A11y tree Firefox"] = 
+snapshots["sbb-slider renders disabled A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
@@ -378,9 +378,9 @@ snapshots["sbb-slider should render disabled A11y tree Firefox"] =
 }
 </p>
 `;
-/* end snapshot sbb-slider should render disabled A11y tree Firefox */
+/* end snapshot sbb-slider renders disabled A11y tree Firefox */
 
-snapshots["sbb-slider should render readonly A11y tree Firefox"] = 
+snapshots["sbb-slider renders readonly A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
@@ -396,5 +396,5 @@ snapshots["sbb-slider should render readonly A11y tree Firefox"] =
 }
 </p>
 `;
-/* end snapshot sbb-slider should render readonly A11y tree Firefox */
+/* end snapshot sbb-slider renders readonly A11y tree Firefox */
 
diff --git a/src/elements/slider/slider.snapshot.spec.ts b/src/elements/slider/slider.snapshot.spec.ts
index 9b8e73b691..ceb62bfbd0 100644
--- a/src/elements/slider/slider.snapshot.spec.ts
+++ b/src/elements/slider/slider.snapshot.spec.ts
@@ -10,7 +10,7 @@ import './slider.js';
 describe(`sbb-slider`, () => {
   let element: SbbSliderElement;
 
-  describe('should render', async () => {
+  describe('renders', async () => {
     beforeEach(async () => {
       element = await fixture(html`<sbb-slider value="1"></sbb-slider>`);
     });
@@ -26,7 +26,7 @@ describe(`sbb-slider`, () => {
     testA11yTreeSnapshot();
   });
 
-  describe('should render with properties', async () => {
+  describe('renders with properties', async () => {
     beforeEach(async () => {
       element = await fixture(
         html`<sbb-slider
@@ -50,7 +50,7 @@ describe(`sbb-slider`, () => {
     testA11yTreeSnapshot();
   });
 
-  describe('should render disabled', async () => {
+  describe('renders disabled', async () => {
     beforeEach(async () => {
       element = await fixture(
         html`<sbb-slider
@@ -75,7 +75,7 @@ describe(`sbb-slider`, () => {
     testA11yTreeSnapshot();
   });
 
-  describe('should render readonly', async () => {
+  describe('renders readonly', async () => {
     beforeEach(async () => {
       element = await fixture(
         html`<sbb-slider
diff --git a/src/elements/slider/slider.stories.ts b/src/elements/slider/slider.stories.ts
index 89068722a3..6cf920f1b9 100644
--- a/src/elements/slider/slider.stories.ts
+++ b/src/elements/slider/slider.stories.ts
@@ -46,7 +46,7 @@ const TemplateSbbSliderInFormField = ({ label, optional, ...args }: Args): Templ
   </sbb-form-field>
 `;
 
-const valueArg: InputType = {
+const value: InputType = {
   control: {
     type: 'text',
   },
@@ -55,7 +55,7 @@ const valueArg: InputType = {
   },
 };
 
-const valueAsNumberArg: InputType = {
+const valueAsNumber: InputType = {
   control: {
     type: 'number',
   },
@@ -64,7 +64,7 @@ const valueAsNumberArg: InputType = {
   },
 };
 
-const minArg: InputType = {
+const min: InputType = {
   control: {
     type: 'text',
   },
@@ -73,7 +73,7 @@ const minArg: InputType = {
   },
 };
 
-const maxArg: InputType = {
+const max: InputType = {
   control: {
     type: 'text',
   },
@@ -82,7 +82,7 @@ const maxArg: InputType = {
   },
 };
 
-const disabledArg: InputType = {
+const disabled: InputType = {
   control: {
     type: 'boolean',
   },
@@ -91,7 +91,7 @@ const disabledArg: InputType = {
   },
 };
 
-const readonlyArg: InputType = {
+const readonly: InputType = {
   control: {
     type: 'boolean',
   },
@@ -100,7 +100,7 @@ const readonlyArg: InputType = {
   },
 };
 
-const startIconArg: InputType = {
+const startIcon: InputType = {
   control: {
     type: 'text',
   },
@@ -109,7 +109,7 @@ const startIconArg: InputType = {
   },
 };
 
-const endIconArg: InputType = {
+const endIcon: InputType = {
   control: {
     type: 'text',
   },
@@ -127,7 +127,7 @@ const ariaLabel: InputType = {
   },
 };
 
-const labelArgArg: InputType = {
+const label: InputType = {
   control: {
     type: 'text',
   },
@@ -136,7 +136,7 @@ const labelArgArg: InputType = {
   },
 };
 
-const optionalArg: InputType = {
+const optional: InputType = {
   control: {
     type: 'boolean',
   },
@@ -146,21 +146,21 @@ const optionalArg: InputType = {
 };
 
 const basicArgTypes: ArgTypes = {
-  max: maxArg,
-  min: minArg,
-  disabled: disabledArg,
-  readonly: readonlyArg,
-  value: valueArg,
-  'value-as-number': valueAsNumberArg,
-  'start-icon': startIconArg,
-  'end-icon': endIconArg,
+  max,
+  min,
+  disabled,
+  readonly,
+  value,
+  'value-as-number': valueAsNumber,
+  'start-icon': startIcon,
+  'end-icon': endIcon,
   'aria-label': ariaLabel,
 };
 
 const formFieldBasicArgsTypes: ArgTypes = {
   ...basicArgTypes,
-  label: labelArgArg,
-  optional: optionalArg,
+  label,
+  optional,
 };
 
 const basicArgs: Args = {
@@ -181,49 +181,49 @@ const formFieldBasicArgs = {
   optional: undefined,
 };
 
-export const sbbSlider: StoryObj = {
+export const Default: StoryObj = {
   render: TemplateSbbSlider,
   argTypes: { ...basicArgTypes },
   args: { ...basicArgs },
 };
 
-export const sbbSliderChangeEvent: StoryObj = {
+export const WithChangeEvent: StoryObj = {
   render: TemplateSbbSliderChangeEvent,
   argTypes: { ...basicArgTypes },
   args: { ...basicArgs },
 };
 
-export const sbbSliderWithoutIcons: StoryObj = {
+export const NoIcons: StoryObj = {
   render: TemplateSbbSlider,
   argTypes: { ...basicArgTypes },
   args: { ...basicArgs, 'start-icon': undefined, 'end-icon': undefined },
 };
 
-export const sbbSliderSlottedIcons: StoryObj = {
+export const WithSlottedIcons: StoryObj = {
   render: TemplateSlottedIcons,
   argTypes: { ...basicArgTypes },
   args: { ...basicArgs, 'start-icon': undefined, 'end-icon': undefined },
 };
 
-export const sbbSliderDisabled: StoryObj = {
+export const Disabled: StoryObj = {
   render: TemplateSbbSlider,
   argTypes: { ...basicArgTypes },
   args: { ...basicArgs, disabled: true },
 };
 
-export const sbbSliderReadonly: StoryObj = {
+export const Readonly: StoryObj = {
   render: TemplateSbbSlider,
   argTypes: { ...basicArgTypes },
   args: { ...basicArgs, readonly: true },
 };
 
-export const sbbSliderInFormField: StoryObj = {
+export const InFormField: StoryObj = {
   render: TemplateSbbSliderInFormField,
   argTypes: { ...formFieldBasicArgsTypes },
   args: formFieldBasicArgs,
 };
 
-export const sbbSliderInFormFieldNoIcon: StoryObj = {
+export const InFormFieldNoIcons: StoryObj = {
   render: TemplateSbbSliderInFormField,
   argTypes: { ...formFieldBasicArgsTypes },
   args: {
@@ -233,7 +233,7 @@ export const sbbSliderInFormFieldNoIcon: StoryObj = {
   },
 };
 
-export const sbbSliderInFormFieldDisabled: StoryObj = {
+export const InFormFieldDisabled: StoryObj = {
   render: TemplateSbbSliderInFormField,
   argTypes: { ...formFieldBasicArgsTypes },
   args: { ...formFieldBasicArgs, disabled: true },
diff --git a/src/elements/slider/slider.visual.spec.ts b/src/elements/slider/slider.visual.spec.ts
new file mode 100644
index 0000000000..4a5f4b76dd
--- /dev/null
+++ b/src/elements/slider/slider.visual.spec.ts
@@ -0,0 +1,96 @@
+import { html, nothing, type TemplateResult } from 'lit';
+
+import {
+  describeViewports,
+  visualDiffActive,
+  visualDiffDefault,
+  visualDiffFocus,
+} from '../core/testing/private.js';
+
+import '../form-field.js';
+import './slider.js';
+
+describe('sbb-slider', () => {
+  const defaultArgs = {
+    disabled: false,
+    readonly: false,
+    withIcon: true,
+    withSlottedIcon: false,
+  };
+
+  const standaloneTemplate = ({
+    disabled,
+    readonly,
+    withIcon,
+    withSlottedIcon,
+  }: typeof defaultArgs): TemplateResult => html`
+    <sbb-slider
+      ?disabled=${disabled}
+      ?readonly=${readonly}
+      start-icon=${withIcon && !withSlottedIcon ? 'walk-slow-small' : nothing}
+      end-icon=${withIcon && !withSlottedIcon ? 'walk-fast-small' : nothing}
+    >
+      ${withIcon && withSlottedIcon
+        ? html`
+            <sbb-icon slot="prefix" name="battery-level-empty-small"></sbb-icon>
+            <sbb-icon slot="suffix" name="battery-level-high-small"></sbb-icon>
+          `
+        : nothing}
+    </sbb-slider>
+  `;
+
+  const formFieldTemplate = (args: typeof defaultArgs): TemplateResult => html`
+    <sbb-form-field>
+      <label>Label</label>
+      ${standaloneTemplate(args)}
+    </sbb-form-field>
+  `;
+
+  const variants = [
+    { name: 'standalone', template: standaloneTemplate },
+    { name: 'form-field', template: formFieldTemplate },
+  ];
+
+  describeViewports({ viewports: ['zero', 'medium'] }, () => {
+    for (const variant of variants) {
+      describe(`${variant.name}`, () => {
+        for (const visualDiffState of [visualDiffActive, visualDiffDefault, visualDiffFocus]) {
+          it(
+            visualDiffState.name,
+            visualDiffState.with(async (setup) => {
+              await setup.withFixture(variant.template(defaultArgs));
+            }),
+          );
+        }
+
+        it(
+          'disabled',
+          visualDiffDefault.with(async (setup) => {
+            await setup.withFixture(variant.template({ ...defaultArgs, disabled: true }));
+          }),
+        );
+
+        it(
+          'readonly',
+          visualDiffDefault.with(async (setup) => {
+            await setup.withFixture(variant.template({ ...defaultArgs, readonly: true }));
+          }),
+        );
+
+        it(
+          'icon=false',
+          visualDiffDefault.with(async (setup) => {
+            await setup.withFixture(variant.template({ ...defaultArgs, withIcon: false }));
+          }),
+        );
+
+        it(
+          'icon=slotted',
+          visualDiffDefault.with(async (setup) => {
+            await setup.withFixture(variant.template({ ...defaultArgs, withSlottedIcon: true }));
+          }),
+        );
+      });
+    }
+  });
+});