fix: slider background should respect borderRadius property

[mayur9210]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

This pull request fixes a visual bug where the slider dataZoom component's background color does not respect the borderRadius configuration option. The fix ensures that when borderRadius is specified, the background rectangle is properly clipped to match the rounded corners.

Fixed issues

• [Bug] The slider mode dataZoom should clip the background by the borderRadius property #21231: The slider mode dataZoom should clip the background by the borderRadius property

Details

Before: What was the problem?

When using the slider dataZoom component with both backgroundColor and borderRadius configured, the background color would extend beyond the defined border radius, creating a visual inconsistency. The rounded corners were applied to some elements but not to the background rectangle, resulting in the background "bleeding" outside the intended bounds.

The background rectangle was created without the r (radius) property in the shape configuration, causing it to ignore the borderRadius setting.

After: How does it behave after the fixing?

The background rectangle now properly respects the borderRadius configuration. The fix retrieves the borderRadius value from the dataZoomModel and applies it to the shape's r property, ensuring consistent rounded corners across all visual elements of the slider.

Implementation details:

• Added const borderRadius = dataZoomModel. get('borderRadius') to retrieve the configuration value
• Added r: borderRadius to the Rect shape properties to apply the border radius

The fix is minimal (2 lines) and follows the existing pattern used in other parts of the codebase where border radius is applied to shapes.

Document Info

One of the following should be checked.

• This PR doesn't relate to document changes
• The document should be updated later
• The document changes have been made in apache/echarts-doc#xxx

Misc

Security Checking

• This PR does not use security-sensitive Web APIs.

ZRender Changes

• This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

N/A - This is a bug fix for existing functionality. The borderRadius option already exists in the dataZoom configuration; this fix simply ensures it's applied to the background element.

Merging options

• Please squash the commits into a single one when merging.

[echarts-bot]

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

Please DO NOT commit the files in dist, i18n, and ssr/client/dist folders in a non-release pull request. These folders are for release use only.

[Copilot]

Pull request overview

This pull request fixes a visual bug where the slider dataZoom component's background does not properly respect the borderRadius configuration option. The fix ensures that when borderRadius is specified, the background rectangle is clipped to match the rounded corners.

Key changes:

• Retrieves the borderRadius value from the dataZoomModel configuration
• Applies the borderRadius to the background Rect shape's r property to enable rounded corners

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[plainheart]

Thanks for your contribution! There is already a PR #18959 that includes this fix and contains more fixes and features. I will merge your PR into it in the v6.2.0 release.