[FR] Add ensureParentOverflowVisible prop to prevent slider label clipping #7585

aworld1 · 2025-10-08T22:13:05Z

Fixes #6765

Changes proposed in this pull request:

Added a new optional useHandleLabelPortal prop to SliderBaseProps that fixes an issue where slider handle labels (tooltips showing current values) get clipped when the slider is placed inside containers with overflow: hidden. This is particularly problematic with sliders that have large min/max ranges (e.g., -1,000,000 to 1,000,000) where the label text is wide.

Technical implementation:

Added ensureParentOverflowVisible?: boolean prop to SliderBaseProps interface (defaults to false for backward
compatibility)
Modified Handle component to programmatically set parent container's overflow style to visible when the prop is enabled
Walks up the DOM tree from the slider element to find all ancestor elements with overflow: hidden/auto/scroll and
temporarily modifies them
Stores original overflow values and restores them when the prop is disabled or component unmounts
Works with all slider variants (Slider, RangeSlider, MultiSlider) and both orientations (horizontal, vertical)

Files modified:

packages/core/src/components/slider/multiSlider.tsx - Added prop definition and default value
packages/core/src/components/slider/handle.tsx - Added DOM traversal logic to modify parent overflow styles

Screenshot

changelog-app · 2025-10-08T22:13:10Z

Generate changelog in `packages/core/changelog/@unreleased`

Type (Select exactly one)

Feature (Adding new functionality)
Improvement (Improving existing functionality)
Fix (Fixing an issue with existing functionality)
Break (Creating a new major version by breaking public APIs)
Deprecation (Removing functionality in a non-breaking way)
Migration (Automatically moving data/functionality to a new system)

Description

Add useHandleLabelPortal prop to fix slider label clipping in overflow containers

Check the box to generate changelog(s)

Generate changelog entry

svc-palantir-github · 2025-10-08T22:28:26Z

prettier

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

svc-palantir-github · 2025-10-09T00:45:23Z

lint

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

changelog-app · 2025-10-09T01:26:23Z

✅ Successfully generated changelog entry!

What happened?

Your changelog entries have been stored in the database as part of our migration to ChangelogV3.

Need to regenerate?

Simply interact with the changelog bot comment again to regenerate these entries.

ggdouglas · 2025-10-09T17:59:26Z

packages/core/src/components/slider/handle.tsx

+        // Also include the styling that would normally come from .bp5-slider-handle .bp5-slider-label
+        const style: React.CSSProperties = vertical
+            ? {
+                  // Tooltip-like styling from SCSS (lines 141-157 in _slider.scss)


I'm not a fan of duplicating all those inline styles from .bp6-slider-label. The two implementations could drift apart pretty easily. How about we add a class to the portal (something like .bp6-slider-portal) to handle the majority of these styles via the existing class instead?

The idea:

Add className="bp6-slider-portal" to the Portal component

Update the SCSS to target both .bp6-slider-handle .bp6-slider-label AND .bp6-slider-portal .bp6-slider-label with the shared styles

Keep only the positioning stuff (position, top, left, transform) as inline styles since those need to be calculated on the fly

ggdouglas · 2025-10-09T18:08:26Z

packages/core/src/components/slider/handle.tsx

+                <span className={Classes.SLIDER_LABEL} style={style}>
+                    {label}
+                </span>
+            </Portal>


Since we're using a portal, we unfortunately also lose the .bp6-dark class scope that gives the label styles in dark mode. I think we should probably address this.

Perhaps we could use a method similar to the one we use in Popover with hasDarkParent:

blueprint/packages/core/src/components/popover/popover.tsx

Lines 700 to 705 in 031a998

private updateDarkParent() {

if (this.props.usePortal && this.state.isOpen) {

const hasDarkParent = this.targetRef.current?.closest(`.${Classes.DARK}`) != null;

this.setState({ hasDarkParent });

}

}

ggdouglas · 2025-10-09T18:18:57Z

packages/core/src/components/slider/handle.tsx

+        }
+
+        // Calculate the position of the label based on the handle's current position
+        const handleRect = this.handleElement.getBoundingClientRect();


I think there are a few issues with using getBoundingClientRect() here for calculating label position. The positioning is only calculated once during render, but the handle position can change dynamically without triggering a re-render. For example, when scrolling or resizing the page:

ggdouglas · 2025-10-09T18:24:22Z

packages/core/src/components/slider/multiSlider.tsx

+     *
+     * @default false
+     */
+    useHandleLabelPortal?: boolean;


Can we add this prop to the Slider component docs example? This would make it easier to review/test this change.

ggdouglas · 2025-10-09T18:26:17Z

packages/core/src/components/slider/handle.tsx

+                  padding: "4px 8px",
+                  position: "fixed",
+                  top: `${handleRect.top + handleRect.height / 2}px`,
+                  transform: "translateY(-50%)",


Calculation seems to be a bit off here with respect to positioning the label next to a handle on a vertical Slider.

svc-palantir-github · 2025-10-10T00:40:35Z

new approach

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

aworld1 · 2025-10-10T00:51:34Z

@ggdouglas I have made some changes to make this severely less complicated. Instead of using portals, which proved to be exceptionally challenging to mimic the example formatting that we had for the slider handle's existing styling, I went with a CSS trick that does the job. I noticed that overflow: visible; on the container of the slider fixes this issue, however there is no way to force the user to make styling changes to their parent divs. So, I created a flag that programmatically sets the overflow properties of the parent, causing the handle to show through.

I have temporarily modified the docs to show a section that contains a demo of this directly, which can be removed pre-merge (see screenshot in PR description).

svc-palantir-github · 2025-10-10T00:58:28Z

updated depth

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

adds new useHandleLabelPortal

39f3992

prettier

d228ab3

lint

c67231b

ggdouglas requested changes Oct 9, 2025

View reviewed changes

new approach

3db3e16

updated depth

72c0e90

aworld1 changed the title ~~Add useHandleLabelPortal prop to fix slider label clipping in overflow containers~~ [FR] Add ensureParentOverflowVisible prop to prevent slider label clipping Oct 10, 2025

aworld1 requested a review from ggdouglas October 10, 2025 00:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[FR] Add ensureParentOverflowVisible prop to prevent slider label clipping #7585

[FR] Add ensureParentOverflowVisible prop to prevent slider label clipping #7585

aworld1 commented Oct 8, 2025 •

edited

Loading

Uh oh!

changelog-app bot commented Oct 8, 2025 •

edited by aworld1

Loading

Uh oh!

svc-palantir-github commented Oct 8, 2025

Uh oh!

svc-palantir-github commented Oct 9, 2025

Uh oh!

changelog-app bot commented Oct 9, 2025

Uh oh!

ggdouglas Oct 9, 2025

Uh oh!

ggdouglas Oct 9, 2025

Uh oh!

ggdouglas Oct 9, 2025

Uh oh!

ggdouglas Oct 9, 2025

Uh oh!

ggdouglas Oct 9, 2025

Uh oh!

svc-palantir-github commented Oct 10, 2025

Uh oh!

aworld1 commented Oct 10, 2025

Uh oh!

svc-palantir-github commented Oct 10, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	private updateDarkParent() {
	if (this.props.usePortal && this.state.isOpen) {
	const hasDarkParent = this.targetRef.current?.closest(`.${Classes.DARK}`) != null;
	this.setState({ hasDarkParent });
	}
	}

[FR] Add ensureParentOverflowVisible prop to prevent slider label clipping #7585

Are you sure you want to change the base?

[FR] Add ensureParentOverflowVisible prop to prevent slider label clipping #7585

Conversation

aworld1 commented Oct 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Fixes #6765

Changes proposed in this pull request:

Technical implementation:

Files modified:

Screenshot

Uh oh!

changelog-app bot commented Oct 8, 2025 • edited by aworld1 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Generate changelog in packages/core/changelog/@unreleased

Uh oh!

svc-palantir-github commented Oct 8, 2025

prettier

Uh oh!

svc-palantir-github commented Oct 9, 2025

lint

Uh oh!

changelog-app bot commented Oct 9, 2025

✅ Successfully generated changelog entry!

What happened?

Need to regenerate?

Uh oh!

ggdouglas Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

ggdouglas Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

ggdouglas Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

ggdouglas Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

ggdouglas Oct 9, 2025

Choose a reason for hiding this comment

Uh oh!

svc-palantir-github commented Oct 10, 2025

new approach

Uh oh!

aworld1 commented Oct 10, 2025

Uh oh!

svc-palantir-github commented Oct 10, 2025

updated depth

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

aworld1 commented Oct 8, 2025 •

edited

Loading

changelog-app bot commented Oct 8, 2025 •

edited by aworld1

Loading

Generate changelog in `packages/core/changelog/@unreleased`