金额区间滑块

要解决的问题

在商业或报价类界面里，按金额区间筛选是常见需求。商机列表要按成交额过滤，报价 Demo 要设置金额上下限，看板侧栏也需要区间条件。用原生 input[type=range] 很难直接做双柄滑块，容易出现拖动后筛选条件不更新、组件卸载后残留实例等问题。

如何工作

该技能基于 noUiSlider 实现双柄 range，核心链路如下：

• 用 min 和 max 绑定 [min,max] 业务查询边界
• 创建 range 后，通过回调把 start、range、step 回写表单
• 组件卸载时调用 slider.noUiSlider.destroy()

推荐步骤

1. 安装 nouislider 并引入官方 CSS
2. 在列表筛区挂载容器，绑定 bounds 与查询 min/max
3. 在 onBeforeUnmount 中调用 destroy()
4. 自测拖动后列表条件变化，确认卸载无残留

注意：变更必须通过回调回写，不能只改 DOM。不要做原生 input 硬凑的双柄，也不要实现复杂多区间或非线性定价逻辑。