[EuiRange] It should be possible to express a fallback value for empty string invalid state

[dej611]

We have a use case where the empty string is mapped to the last valid value in the range input.

Right now the range slider is moved in the middle of the single range bar, but it would be useful to avoid the movement of the slider in this specific case.

[github-actions[bot]]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[cchaos]

@dej611 I'm not understanding your use-case. EuiRange requires passing a value so it knows where to place the handle along the slider. Without a value the range slider is incomplete/invalid. It sounds more like you should be evaluating on the implementation side before passing back in the value to the slider.

I can see in our own documentation we don't actually align with our explanation when withInput = true. You can see the handle shift to the middle when deleting the value before typing in a new one, though our docs say it should shift to the min value. We should probably fix this, but it still means that the handle will change position when the value="". I also wonder if this is truly a valid state.

I'll mark this as a bug fix to align with our documented explanation. But if there's more you need, please explain further. (Screenshots would help).

[dej611]

@dej611 I'm not understanding your use-case. EuiRange requires passing a value so it knows where to place the handle along the slider. Without a value the range slider is incomplete/invalid. It sounds more like you should be evaluating on the implementation side before passing back in the value to the slider.

I think we agree that an empty string is an invalid state for the slider. Right now the only way to move the slider handler is to set a value, which is reflected in the input box there. We were looking for some sort of placeholder behaviour in this case where a custom value is provided to the slider, and when set this value is used to place the slider handle in such position, without filling the input box (hence keeping the empty string).

As possible use case is the following:

• the user opens the panel with the slider set to 60 (in a 0-100 range)
• the user deletes 0 and the slider move to 6
• the user deletes 6 and the slider moves back to 60 (the placeholder value, which in our case was the initial value)
• the user types 20 at this point and the slider handle moves to the right place

Right now this is not possible there's a two way binding between the input box and the slider position. I think that this is more an enhancement request rather than a bug.

[rc-enfuse]

Team, Could you please assign this bug to me?

[rc-enfuse]

@dej611 Does this change meet your expectations? I think I'm in the ballpark of what your looking for elastic/eui/pull/5838

[thompsongl]

EUI does not do any work to shift the handle to the middle of the range in the undefined/empty value case; this is part of the DOM spec. As much as possible we've deferred to native HTML behavior and this is one of those cases.

[chandlerprall]

As said above, EUI follows the spec here where an undefined value is rendered in the middle of the range.

However, there is room for a distinction between an actual undefined value vs. the user has cleared the range input but it is still focused for new input. I think it makes sense in that case to preserve the thumb's location until the value updates or the blur event fires.