diff --git a/CHANGELOG.md b/CHANGELOG.md
index 20b96462d7e..aacb6d34e5e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 - Fixed focus trap error & performance impact when one focus trap is deactivated and another becomes enabled ([#4071](https://github.com/elastic/eui/pull/4071))
 - Fixed a condition in `EuiInMemoryTable` to avoid mistaken assignment of `sortName` ([#4138](https://github.com/elastic/eui/pull/4138))
 - Fixed bug in small `EuiImage`'s not respecting the optional sizes when `allowFullScreen` is set to true ([#4207](https://github.com/elastic/eui/pull/4207))
+- Fixed incorrect initial rendering of `EuiDualRange` thumbs when element width is 0 ([#4230](https://github.com/elastic/eui/pull/4230))
 
 ## [`30.2.0`](https://github.com/elastic/eui/tree/v30.2.0)
 
diff --git a/src/components/form/range/dual_range.tsx b/src/components/form/range/dual_range.tsx
index 931dd831abf..c9aa74e1537 100644
--- a/src/components/form/range/dual_range.tsx
+++ b/src/components/form/range/dual_range.tsx
@@ -127,6 +127,7 @@ export class EuiDualRange extends Component<EuiDualRangeProps> {
     rangeSliderRefAvailable: false,
     isPopoverOpen: false,
     rangeWidth: undefined,
+    isVisible: true, // used to trigger a rerender if initial element width is 0
   };
 
   preventPopoverClose = false;
@@ -155,6 +156,24 @@ export class EuiDualRange extends Component<EuiDualRangeProps> {
     return this.lowerValueIsValid && this.upperValueIsValid;
   }
 
+  componentDidMount() {
+    if (this.rangeSliderRef && this.rangeSliderRef.clientWidth === 0) {
+      // Safe to call `setState` inside conditional
+      // https://reactjs.org/docs/react-component.html#componentdidmount
+      // eslint-disable-next-line react/no-did-mount-set-state
+      this.setState({ isVisible: false });
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.rangeSliderRef?.clientWidth && !this.state.isVisible) {
+      // Safe to call `setState` inside conditional
+      // https://reactjs.org/docs/react-component.html#componentdidupdate
+      // eslint-disable-next-line  react/no-did-update-set-state
+      this.setState({ isVisible: true });
+    }
+  }
+
   _determineInvalidThumbMovement = (
     newVal: ValueMember,
     lower: ValueMember,