Preview documentation changes for this PR: https://eui.elastic.co/pr_4815/

Preview documentation changes for this PR: https://eui.elastic.co/pr_4815/

Preview documentation changes for this PR: https://eui.elastic.co/pr_4815/

Preview documentation changes for this PR: https://eui.elastic.co/pr_4815/

The ticks are not centered with the thumbs

The solution for this will largely come down to how we want to handle truncation.
If truncation continues to be a requirement for the labels, I don't yet have a good way to position the ticks correctly. Shifting the ticks to the correct locations causes other layout and overlap issues.
If truncation is deemed no longer important, I have some calculations that could work.

//cc @cchaos

And just to show how strange the native <input type=range> scale is:

10, 30, 40, 50 are spot on with a scaling calculation, but 20 is off. Not sure how to account for this with math.
I'll also throw in that Firefox appears to use a different scale/offset than Chromium browsers.
This scale offset could be the reason we hid the tick marks behind the thumb in the first iterations; it hides the visual offset.

My best attempt was to replace the native thumb with EuiRangeThumb. Then I improved the calculateThumbPositionStyle() to make the thumb be better positioned. But then it didn't work well when fullWidth={true}. Also as we can notice the thumbs are not 100% centered with the ticks

I think the best solution is if we don't rely on the native <input type="range" />. Moving to custom components would allow us to better position both thumbs and ticks, to have better styles and more consistency across both components.

I think this is a good example of what we can achieve: https://github.com/sghall/react-compound-slider.

What do you think @thompsongl? (Maybe it's not achievable for 7.14).

My preference is to find a compromise that allows continued use of <input type="range" />, such as making some adjustments to get closer to centered ticks but being ok with some slight offset.

We note in the documentation that sliders are not meant to be used for precision, so there is some precedence for keeping with native elements at the expense of perfection:

Range sliders should only be used when the precise value is not considered important. If the precise value does matter, add the showInput prop or use a EuiFieldNumber instead.

My best attempt was to replace the native thumb with EuiRangeThumb

Looking into this as well. Interestingly, the math that makes the most sense places the thumb exactly where the native thumb would be 😅

The solution for this will largely come down to how we want to handle truncation.

Although still true, I found a way to enforce desired truncation while achieving the label positioning we need. Still a couple layout discrepancies to work out between default and custom labels, but I hope to have a PR for you tomorrow.

👉 elizabetdev#17
Still off center by a pixel or two in some spots depending on how the labels are configured, but it's much closer than before.

Preview documentation changes for this PR: https://eui.elastic.co/pr_4815/

Preview documentation changes for this PR: https://eui.elastic.co/pr_4815/

Preview documentation changes for this PR: https://eui.elastic.co/pr_4815/

Thanks @thompsongl for elizabetdev#18. It looks great. 🎉

@cchaos the // sass-lint:disable-block no-color-literals comments had to stay:

Safari improvements

The inline color picker in Safari now shares the same focus states as in other browsers:

The single range now has focus states. The only difference in Safari is when we have the "highlight". We need to start moving the thumb to make it focused. In other browsers once we focus the thumb the highlight is focused tight away.

Another limitation or issue I couldn't solve in Safari is when we click the thumb of the color stops there’s a flash of the outline. I tried different things to solve and no luck.

Preview documentation changes for this PR: https://eui.elastic.co/pr_4815/

Another limitation or issue I couldn't solve in Safari is when we click the thumb of the color stops there’s a flash of the outline. I tried different things to solve and no luck.

Maybe this is a terrible idea, but what if we added a transition delay for outline JUST for this component? Something just enough for it to maybe not show during that quick focus transition to the popover. I tried something pretty short like 100ms which negated it on click but was still snappy enough when tabbing.

Preview documentation changes for this PR: https://eui.elastic.co/pr_4815/

Preview documentation changes for this PR: https://eui.elastic.co/pr_4815/

Preview documentation changes for this PR: https://eui.elastic.co/pr_4815/

Thanks @cchaos! As suggested I added the transition delay. Tried different speeds and the outline still appears for me in Safari. I left a very fast transition delay for now (it might solve for some users).

I'm merging the PR and then I can follow up on this.

@miukimiu You also have to add an overall transition. In my video, I added transition: outline; to the regular non-focused state.

@cchaos it seems that I forgot to commit the transition: outline; as you noticed.

But I actually tried with the transition: outline; and it definitely improved the issue. But sometimes the outline appears.

I'll follow up with a PR.

Preview documentation changes for this PR: https://eui.elastic.co/pr_4815/