From ac953175239966e7ec6526c98eaaa9982512ed18 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Thu, 5 Sep 2019 11:56:06 -0500
Subject: [PATCH 1/2] dual range respond to resize events when in showInputOnly
 mode

---
 src/components/form/range/dual_range.js | 28 ++++++++++++++++++++-----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index 984991a176a..60e5a14c0d7 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -6,6 +6,7 @@ import { keyCodes } from '../../../services';
 import { isWithinRange } from '../../../services/number';
 import { EuiInputPopover } from '../../popover';
 import { EuiFormControlLayoutDelimited } from '../form_control_layout';
+import { EuiResizeObserver } from '../../observer/resize_observer';
 import makeId from '../form_row/make_id';
 
 import { EuiRangeHighlight } from './range_highlight';
@@ -22,6 +23,7 @@ export class EuiDualRange extends Component {
     hasFocus: false,
     rangeSliderRefAvailable: false,
     isPopoverOpen: false,
+    rangeWidth: null,
   };
 
   rangeSliderRef = null;
@@ -29,6 +31,7 @@ export class EuiDualRange extends Component {
     this.rangeSliderRef = ref;
     this.setState({
       rangeSliderRefAvailable: !!ref,
+      rangeWidth: !!ref ? ref.clientWidth : null,
     });
   };
 
@@ -206,7 +209,7 @@ export class EuiDualRange extends Component {
     this._handleOnChange(this.lowerValue, upper, e);
   };
 
-  calculateThumbPositionStyle = value => {
+  calculateThumbPositionStyle = (value, width) => {
     // Calculate the left position based on value
     const decimal =
       (value - this.props.min) / (this.props.max - this.props.min);
@@ -215,7 +218,8 @@ export class EuiDualRange extends Component {
     valuePosition = valuePosition >= 0 ? valuePosition : 0;
 
     const EUI_THUMB_SIZE = 16;
-    const thumbToTrackRatio = EUI_THUMB_SIZE / this.rangeSliderRef.clientWidth;
+    const trackWidth = width || this.rangeSliderRef.clientWidth;
+    const thumbToTrackRatio = EUI_THUMB_SIZE / trackWidth;
     const trackPositionScale = (1 - thumbToTrackRatio) * 100;
     return { left: `${valuePosition * trackPositionScale}%` };
   };
@@ -246,6 +250,12 @@ export class EuiDualRange extends Component {
     });
   };
 
+  onResize = ({ width }) => {
+    this.setState({
+      rangeWidth: width,
+    });
+  };
+
   render() {
     const {
       className,
@@ -397,7 +407,10 @@ export class EuiDualRange extends Component {
                 onKeyDown={this.handleLowerKeyDown}
                 onFocus={() => this.toggleHasFocus(true)}
                 onBlur={() => this.toggleHasFocus(false)}
-                style={this.calculateThumbPositionStyle(this.lowerValue || min)}
+                style={this.calculateThumbPositionStyle(
+                  this.lowerValue || min,
+                  showInputOnly ? this.state.rangeWidth : null
+                )}
                 aria-describedby={this.props['aria-describedby']}
                 aria-label={this.props['aria-label']}
               />
@@ -411,7 +424,10 @@ export class EuiDualRange extends Component {
                 onKeyDown={this.handleUpperKeyDown}
                 onFocus={() => this.toggleHasFocus(true)}
                 onBlur={() => this.toggleHasFocus(false)}
-                style={this.calculateThumbPositionStyle(this.upperValue || max)}
+                style={this.calculateThumbPositionStyle(
+                  this.upperValue || max,
+                  showInputOnly ? this.state.rangeWidth : null
+                )}
                 aria-describedby={this.props['aria-describedby']}
                 aria-label={this.props['aria-label']}
               />
@@ -440,7 +456,9 @@ export class EuiDualRange extends Component {
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover}
         disableFocusTrap={true}>
-        {theRange}
+        <EuiResizeObserver onResize={this.onResize}>
+          {resizeRef => <div ref={resizeRef}>{theRange}</div>}
+        </EuiResizeObserver>
       </EuiInputPopover>
     ) : (
       undefined

From 1b58cdf736d83e224a8488e00857b0f4d67dab35 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Thu, 5 Sep 2019 12:02:06 -0500
Subject: [PATCH 2/2] clean up

---
 src/components/form/range/dual_range.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/form/range/dual_range.js b/src/components/form/range/dual_range.js
index 60e5a14c0d7..1aa5658369d 100644
--- a/src/components/form/range/dual_range.js
+++ b/src/components/form/range/dual_range.js
@@ -218,7 +218,10 @@ export class EuiDualRange extends Component {
     valuePosition = valuePosition >= 0 ? valuePosition : 0;
 
     const EUI_THUMB_SIZE = 16;
-    const trackWidth = width || this.rangeSliderRef.clientWidth;
+    const trackWidth =
+      this.props.showInput === 'only' && !!width
+        ? width
+        : this.rangeSliderRef.clientWidth;
     const thumbToTrackRatio = EUI_THUMB_SIZE / trackWidth;
     const trackPositionScale = (1 - thumbToTrackRatio) * 100;
     return { left: `${valuePosition * trackPositionScale}%` };
@@ -409,7 +412,7 @@ export class EuiDualRange extends Component {
                 onBlur={() => this.toggleHasFocus(false)}
                 style={this.calculateThumbPositionStyle(
                   this.lowerValue || min,
-                  showInputOnly ? this.state.rangeWidth : null
+                  this.state.rangeWidth
                 )}
                 aria-describedby={this.props['aria-describedby']}
                 aria-label={this.props['aria-label']}
@@ -426,7 +429,7 @@ export class EuiDualRange extends Component {
                 onBlur={() => this.toggleHasFocus(false)}
                 style={this.calculateThumbPositionStyle(
                   this.upperValue || max,
-                  showInputOnly ? this.state.rangeWidth : null
+                  this.state.rangeWidth
                 )}
                 aria-describedby={this.props['aria-describedby']}
                 aria-label={this.props['aria-label']}