[EuiDualRange] Bug when passing big integers as tick values

[miukimiu]

As part of the review on elastic/kibana#96791, I noticed that the EuiDualRange doesn't fill 100% of the width when big integers tick values are passed.

I run some tests here: https://codesandbox.io/s/holy-rgb-rgjg2?file=/index.js.

As we can see:

• The top timeslider gets the full width and the one from the bottom doesn't.
• The one from the top has tick values like value: 20. The one from the bottom has tick values like value: 1619049600000.

It seems that the component doesn't handle properly bigger integers.

[thompsongl]

Same issue as #4109, although I'm not sure how to account for the fact that the labels here are the same size and the margin problem still occurs.

[thompsongl]

I'm not sure how to account for the fact that the labels here are the same size and the margin problem still occurs

Looks like the tick value is always used to determine extra spacing, not the label (if provided)

[thompsongl]

It'll be easy to solve the problem shown above where the labels are the same; the two ranges will render the same size with a few small changes.

I think the best strategy is to remove the added margin and instead shift the label slightly left, like so:

It's slightly more likely that label overlaps will occur. The larger problem is attempting to prevent overlap in the first place, which I'm starting to believe we simply can't do with the level of tick customization we allow.

For instance,

No shifting of the label in the available space will resolve the overlap. The only real solution is to rotate labels. This could be a configuration option we add, but it still requires placing the burden of label overlap prevention on the consumer.

[thompsongl]

What do you think @miukimiu, Align the labels with the end of the range, or reserve some space and have the labels extend beyond the range?

[miukimiu]

@thompsongl, I think is better to reserve some space and have labels extended beyond the range. This way we gain more space to avoid overlaps.