fix: Preserve slider bar color when accordion is collapsed/expanded

[SuMayaBee]

Description

While looking into issue #8121, I discovered that sliders inside Accordion components would lose their bar color (turn grey) after collapsing and expanding the accordion, regardless of whether the slider was disabled or enabled. The slider would initially show the correct teal color when enabled, but after collapsing and re-expanding the accordion, it would turn grey even when still enabled.

Before fix:

• Slider shows teal color when enabled ✓
• After collapsing and expanding accordion, slider turns grey ✗
• Slider appears grey even when enabled ✗

477479956-b1fb58f0-b6be-4bbb-8b3b-8986306d8885.webm

After fix:

• Slider shows teal color when enabled ✓
• After collapsing and expanding accordion, slider maintains teal color ✓
• Slider correctly displays teal when enabled, grey when disabled ✓

PR_After7.mp4

Problem:
Looking into the codebase, I found that when an accordion is expanded, the _collapse() method in card.ts was calling child_view.render() followed by child_view.after_render(). This triggered a full re-render of the slider widget, which caused Bokeh's _set_bar_color() method to run and apply an inline background-color style with Panel's default grey color (#e6e6e6) on the .noUi-connect element. I discovered that this inline style was overriding the CSS default teal color (#3FB8AF) that should be displayed when the slider is enabled.

Solution:
Replaced child_view.render() + child_view.after_render() with child_view.r_after_render() in the expand branch. This restores the DOM without a full re-render, preserving existing styles and avoiding the incorrect color override.

Technical Details:

• File: panel/models/card.ts → _collapse() method
• Change: child_view.r_after_render() instead of child_view.render() + child_view.after_render()
• Result: Avoids full re-render, preventing _set_bar_color() from applying incorrect inline styles

Fixes #8121

How Has This Been Tested?

• Manual Testing: Verified sliders maintain correct color (teal when enabled, grey when disabled) after accordion collapse/expand.

• Automated Testing: Added UI test test_slider_color_preserved_in_accordion() that tests all slider types (FloatSlider, IntSlider, EditableFloatSlider, EditableIntSlider) inside an Accordion and verifies color preservation after collapse/expand.

Test Command:

pytest panel/tests/ui/widgets/test_sliders.py::test_slider_color_preserved_in_accordion -v

AI Disclosure

Gemini 3 Flash is used to review the codebase and identify the root cause of the issue.

Checklist:

Tests added and is passing

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 86.05%. Comparing base (237c8fe) to head (b4e2d8a).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8460      +/-   ##
==========================================
+ Coverage   85.50%   86.05%   +0.55%     
==========================================
  Files         349      349              
  Lines       55167    55184      +17     
==========================================
+ Hits        47170    47491     +321     
+ Misses       7997     7693     -304     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.