diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Full_Width.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Full_Width.png
new file mode 100644
index 00000000000..46012eb6d4c
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiDatePickerRange_Full_Width.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Full_Width.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Full_Width.png
new file mode 100644
index 00000000000..88226d2cdf3
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiDatePickerRange_Full_Width.png differ
diff --git a/packages/eui/src/components/date_picker/date_picker_range.stories.tsx b/packages/eui/src/components/date_picker/date_picker_range.stories.tsx
index 6db83766ac6..a9699630406 100644
--- a/packages/eui/src/components/date_picker/date_picker_range.stories.tsx
+++ b/packages/eui/src/components/date_picker/date_picker_range.stories.tsx
@@ -40,6 +40,41 @@ const meta: Meta<EuiDatePickerRangeProps> = {
 export default meta;
 type Story = StoryObj<EuiDatePickerRangeProps>;
 
+const StatefulPlayground = ({
+  startDateControl,
+  endDateControl,
+  ...rest
+}: EuiDatePickerRangeProps) => {
+  const [selectedStartDate, setSelectedStartDate] = useState<moment.Moment>(
+    startDateControl.props.selected
+  );
+  const [selectedEndDate, setSelectedEndDate] = useState<moment.Moment>(
+    endDateControl.props.selected
+  );
+
+  const startControl = React.cloneElement(startDateControl, {
+    selected: selectedStartDate,
+    onChange: setSelectedStartDate,
+    startDate: selectedStartDate,
+    endDate: selectedEndDate,
+  });
+
+  const endControl = React.cloneElement(endDateControl, {
+    selected: selectedEndDate,
+    onChange: setSelectedEndDate,
+    startDate: selectedStartDate,
+    endDate: selectedEndDate,
+  });
+
+  return (
+    <EuiDatePickerRange
+      startDateControl={startControl}
+      endDateControl={endControl}
+      {...rest}
+    />
+  );
+};
+
 export const Playground: Story = {
   parameters: {
     controls: {
@@ -104,37 +139,16 @@ export const RestrictedSelection: Story = {
   render: (args) => <StatefulPlayground {...args} />,
 };
 
-const StatefulPlayground = ({
-  startDateControl,
-  endDateControl,
-  ...rest
-}: EuiDatePickerRangeProps) => {
-  const [selectedStartDate, setSelectedStartDate] = useState<moment.Moment>(
-    startDateControl.props.selected
-  );
-  const [selectedEndDate, setSelectedEndDate] = useState<moment.Moment>(
-    endDateControl.props.selected
-  );
-
-  const startControl = React.cloneElement(startDateControl, {
-    selected: selectedStartDate,
-    onChange: setSelectedStartDate,
-    startDate: selectedStartDate,
-    endDate: selectedEndDate,
-  });
-
-  const endControl = React.cloneElement(endDateControl, {
-    selected: selectedEndDate,
-    onChange: setSelectedEndDate,
-    startDate: selectedStartDate,
-    endDate: selectedEndDate,
-  });
+/**
+ * VRT only stories
+ */
 
-  return (
-    <EuiDatePickerRange
-      startDateControl={startControl}
-      endDateControl={endControl}
-      {...rest}
-    />
-  );
+export const FullWidth: Story = {
+  tags: ['vrt-only'],
+  args: {
+    startDateControl: <EuiDatePicker />,
+    endDateControl: <EuiDatePicker />,
+    fullWidth: true,
+  },
+  render: (args) => <StatefulPlayground {...args} />,
 };