[EuiDualRange] Fix initial incorrect thumb position (#4230)

* trigger rerender after width is no longer 0

* revert me

* Revert "revert me"

This reverts commit 8240e6f.

* add comment

* CL

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)
 

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,