[EuiDualRange] Fix initial incorrect thumb position

[thompsongl]

Summary

Fixes a bug where EuiDualRange will position its thumbs incorrectly due to incalculable width. This occurs in situations where the range is initially rendered inside a parent element with display:none, making its width 0px;

Before:

See the "After" at https://eui.elastic.co/pr_4230/#/forms/range-sliders#dual-range (docs update will be reverted)

The solution is to conditionally rerender the component on componentDidUpdate when a width becomes calculable.

Checklist

- [ ] Check against all themes for compatibility in both light and dark modes
- [ ] Checked in mobile
- [ ] Checked in Chrome, Safari, Edge, and Firefox
- [ ] Props have proper autodocs
- [ ] Added documentation
- [ ] Checked Code Sandbox works for the any docs examples
- [ ] Added or updated jest tests

• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately
• Reverted doc change

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4230/

[cchaos]

Thanks for this fix! I tested the example in the codesandbox with the latest release (it had the issue), then test this PR and the issue is gone. 👍

Don't forget a CL ;)

Also, maybe there's someway to add a test for this? 🤷

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4230/