[EuiDualRange] Upper value isn't allowed to be blank

[vera]

Describe the bug

I am trying to use the EuiDualRange component to allow a user to enter a range, where upper or lower bound may not be specified.

I.e. the user is allowed to enter ranges like "0 <= x <= 50" but also "0 <= x" (no upper bound) or "x <= 50" (no lower bound).

The documentation states that

Passing empty strings as the value to the ranges, will allow the inputs to be blank, though the range handles will show at the min (or max and min) positions.

https://eui.elastic.co/#/forms/range-sliders#inputs

This works, however, the component is buggy when the upper bound value is left blank.

You can reproduce this in the demo embedded at the link above. If you empty the upper value field, the lower value field will turn invalid with an error message of "Please select a value that is no more than 0."

When the lower bound value is left blank, everything works as expected.

Impact and severity

For the use case described above, the component EuiDualRange is not usable.

Environment and versions

• EUI version: can be reproduced in most current version v94.5.0, see demo linked above
• React version: /
• Kibana version (if applicable): /
• Browser: tested in Firefox and Chrome
• Operating System: tested in Ubuntu 22.04 and Windows 10

To Reproduce

1. Go to https://eui.elastic.co/#/forms/range-sliders#inputs
2. Click on upper bound value field (has default value of 100)
3. Empty field
4. See error: lower bound value field turns invalid

Expected behavior

The lower bound value field should not be invalid.

Minimum reproducible sandbox

see https://eui.elastic.co/#/forms/range-sliders#inputs

Screenshots

Additional context

/

[cee-chen]

Thanks for catching this Vera! A fix will be coming out soon.

[vera]

Thanks for the quick fix!

[cee-chen]

Thank YOU for the super clear repro steps and explanation!