[Eui{Dual}Range] Rethink `levels`

[thompsongl]

trafficstars

I probably should have mentioned this in the issue before work got started, but I'd like to take a step back to "redesign" this idea of levels. The main problem is that we have a min/max value to provide for each, which means that the levels never really encompass that number (not visually anyhow). This can be confusing if the consumer did not also provide extra context.

So the question is, is this just an implementation detail and we need to change the docs so that the custom ticks live within the levels or do we find a way to ensure they overlap the values provided (even if the values literally overlap, i.e. max: 25, min: 25?

And then just a general note about "design"... Should we consider replacing the track with the levels instead of trying to show beneath it? At least in the single range version?

Originally posted by @cchaos in https://github.com/elastic/eui/issues/5181#issuecomment-919489639

[thompsongl]

More discussion in #5181 around inclusive vs. exclusive range limits.

[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.

[elizabetdev]

Should we consider replacing the track with the levels instead of trying to show beneath it? At least in the single range version?

@thompsongl and @cchaos as part of the Emotion conversion (#6092) I want to enhance the styles and show the levels at the same level of the track. I designed 3 options. All of them have pros and cons. But I would like to know your opinions on what version works the best.

@thompsongl I'm just focused right now on the design and possibly we will have some limitations that we can discuss later.

[cchaos]

OOoh, the concept of no. 1 (the stripes) is very interesting. Though when I first looked at it, I thought the stripes were indicating not selected since it's similar to a "crossed-out" visual. I would further explore that concept to indicate "not included" and maybe combining with some lightening treatment like no. 2 to ensure the selection really stands out.

Though visually the simplicity of no. 3 is less distracting, I do worry that not always showing the level colors could be confusing or force interaction just for understanding. But maybe in some cases that's ok. Perhaps the consumer has an option and there's good guidelines about when to use which?

[elizabetdev]

Thanks, @cchaos for your suggestions. I tried to explore your concept to indicate what are the excluded ranges and added some lightening treatment.

I'm also thinking of adding a prop called showTrack. So when there's a range and the showTrack={true} it removes the levels from the background and shows the light gray track instead.

For the guidelines, I'm thinking why would you want to show the track instead of levels? 🤔

• There's only one level. And you use 0-100 to color the slider instead of using the default colors.
• When the ranges show for the first time there's a range selected that gives an idea of the colors of the levels. For example, is selected by default 0-80. Just showing 0 would be bad practice.
• The colors don't have a strong meaning. They don't represent severity.

But... I need to think more about the guidelines. Or if it really makes sense to have this showTrack prop.

Let me know your thoughts on these new designs.

[thompsongl]

I'm just focused right now on the design and possibly we will have some limitations that we can discuss later.

👍

I agree with all of Caroline's initial comments, and I think the recent change to have the stripes indicate the excluded portion of the range is good iteration.

[elizabetdev]

Closed by https://github.com/elastic/eui/pull/6092