Slider popover in hidden overflow div

[JvH-json]

Environment

• Package version(s): Blueprint 4 (issue exists on 5 as well)
• Browser and OS versions: Chrome

Question

We have a case where we need a blueprint slider within a div. This div needs to have the overflow-x: hidden property. The min and max values of the slider can be arbitrarily large. The width of the slider, however, needs to remain consistent regardless of the min and max values. With very large numbers, both the axis labels and the popover containing the value of the slider overflows outside of the div it is in. (In the screenshot the min and max are -1,000,000 and 1,000,000 respectively)

We have a workaround that moves the min and max label to within the bounds of the div, but we are unable to find a solution that works for the popover.

Is there any built-in functionality or workaround that can be suggested to either:

• Allow the popover of the slider pop out above the overflowing div
• As soon as the popover is about to leave the bounds of the div that it sticks and expands towards the center of the div

Here is a sandbox to hopefully better illustrate the issue: https://codesandbox.io/p/sandbox/constrained-blueprint-slider-l42kx6

[invliD]

I believe a decent solution would be to (optionally?) use a portal for the slider labels, so that it is rendered outside of its container. We would accept a contribution to fix this issue.

[AustineChi]

I believe a decent solution would be to (optionally?) use a portal for the slider labels, so that it is rendered outside of its container. We would accept a contribution to fix this issue.

Hi, Is anyone currently working on implementing this solution? If not, I'd like to take it on and submit a solution in the next week. Thanks!