2026-05-08-02-54-30 调整模型切分范围条

工程分析/经验记录.md

@@ -91,3 +91,21 @@ C. 解决问题方案
 D. 后续如何避免问题
 
 涉及医学影像与模型叠加时，mask 必须来自真实几何或分割数据，不能用装饰性形状替代。若 STL 与 DICOM 坐标系不一致，应优先补充配准矩阵或平移/旋转/缩放参数，而不是在图像上手工假标。
+
+## 2026-05-08-02-54-30 调整模型切分范围条
+
+A. 具体问题
+
+模型切分的起点和终点虽然逻辑上共用一段范围，但 UI 使用两个原生 range 叠加，浏览器仍显示两条完整蓝色轨道，看起来像两个独立进度条。
+
+B. 产生问题原因
+
+原生 `<input type="range">` 会绘制自己的轨道。两个 range 即使绝对定位叠在同一区域，也会各自显示一条轨道，不能自然表现为单条范围选择器。
+
+C. 解决问题方案
+
+将可见轨道改为自定义 div：一条灰色总轨道和一段蓝色选中范围；两个原生 range 仅保留透明拖拽层和手柄。通过 CSS 隐藏 WebKit/Firefox 的原生轨道，并分别给起点、终点手柄设置颜色。
+
+D. 后续如何避免问题
+
+实现双端范围选择器时，不要直接依赖两个原生 range 的默认轨道。应使用自定义轨道绘制范围，仅让原生 input 提供拖拽能力，或引入明确支持 range selection 的组件。