Comfy-Org / Comfy-Org/ComfyUI_frontend

refactor(load3d): migrate Load3dViewerContent slider controls off PrimeVue

Open
#10,791 0 comments 0 reactions 1 assignee Claimed by @DrJKL View on GitHub
area:3d area:vue-migration PrimeVue
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

## Summary

The 3D inspector side panel in `src/components/load3d/Load3dViewerContent.vue` (and its child viewer controls) still depends on PrimeVue's `Slider` component. This dependency recently caused a bug where the slider rendered with near-zero height, requiring manual `:deep(.p-slider)` / `:deep(.p-slider-handle)` CSS overrides to restore correct dimensions (fixed in #10768).

Per the project guideline to avoid new usage of PrimeVue components, this file and its children are a **priority migration target**.

## Affected files

- `src/components/load3d/Load3dViewerContent.vue` — contains the workaround `:deep()` CSS rules
- `src/components/load3d/controls/viewer/ViewerCameraControls.vue` — FOV slider
- `src/components/load3d/controls/viewer/ViewerLightControls.vue` — Light Intensity slider

## Suggested approach

Replace the PrimeVue `Slider` component with a non-PrimeVue alternative (e.g., Reka UI `SliderRoot` / `SliderTrack` / `SliderThumb`, or a styled native ``). This would allow the `:deep()` CSS hacks in `Load3dViewerContent.vue` to be removed entirely.

## References

- PR: #10768 (introduced the CSS workaround)
- Review comment: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10768#discussion_r3019683624
- Requested by: @DrJKL

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-10791-refactor-load3d-migrate-Load3dViewerContent-slider-controls-off-PrimeVue-3356d73d365081c39732c66c313a3177) by [Unito](https://www.unito.io)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.