diff --git a/packages/eui/changelogs/upcoming/7767.md b/packages/eui/changelogs/upcoming/7767.md
new file mode 100644
index 00000000000..98ecdc942f3
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/7767.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed an `EuiDualRange`s with `showInput` bug, where `min`/`max` values and invalid states were not being correctly set if values were empty strings
diff --git a/packages/eui/src/components/form/range/dual_range.test.tsx b/packages/eui/src/components/form/range/dual_range.test.tsx
index aea8900abe2..47801e84d61 100644
--- a/packages/eui/src/components/form/range/dual_range.test.tsx
+++ b/packages/eui/src/components/form/range/dual_range.test.tsx
@@ -217,6 +217,31 @@ describe('EuiDualRange', () => {
jest.restoreAllMocks();
});
+
+ it('correctly defaults to min/max props if the lower or upper value is an empty string', () => {
+ const props = {
+ showInput: true,
+ min: -50,
+ max: 50,
+ minInputProps: { 'aria-label': 'Min value' },
+ maxInputProps: { 'aria-label': 'Max value' },
+ onChange: () => {},
+ };
+
+ const { getByLabelText, rerender } = render(
+
+ );
+ expect(getByLabelText('Min value')).toHaveAttribute('min', '-50');
+ expect(getByLabelText('Min value')).toHaveAttribute('max', '50');
+
+ rerender();
+ expect(getByLabelText('Max value')).toHaveAttribute('min', '-50');
+ expect(getByLabelText('Max value')).toHaveAttribute('max', '50');
+
+ rerender();
+ expect(getByLabelText('Min value')).not.toBeInvalid();
+ expect(getByLabelText('Max value')).not.toBeInvalid();
+ });
});
describe('loading', () => {
diff --git a/packages/eui/src/components/form/range/dual_range.tsx b/packages/eui/src/components/form/range/dual_range.tsx
index ec196218757..487733bd49c 100644
--- a/packages/eui/src/components/form/range/dual_range.tsx
+++ b/packages/eui/src/components/form/range/dual_range.tsx
@@ -458,7 +458,7 @@ export class EuiDualRangeClass extends Component<
// Non-overridable props
side="min"
min={min}
- max={Number(this.upperValue)}
+ max={this.upperValue === '' ? max : Number(this.upperValue)}
step={step}
compressed={compressed}
autoSize={!showInputOnly}
@@ -513,7 +513,7 @@ export class EuiDualRangeClass extends Component<
{...maxInputProps}
// Non-overridable props
side="max"
- min={Number(this.lowerValue)}
+ min={this.lowerValue === '' ? min : Number(this.lowerValue)}
max={max}
step={step}
compressed={compressed}