NGX Slider 2.0.4版本滑块无规则上下跳动无法停止问题求助

核心问题定位 #

你代码里同时使用了[(ngModel)]和[(value)]两个双向绑定属性，这是滑块无限跳动的直接原因。ngx-slider的ngModel和value都是用于同步组件值与滑块UI的双向绑定机制，同时启用会触发循环更新：滑块UI更新触发值修改，值修改又反过来触发UI更新，往复不停导致滑块跳动。

另外注意你绑定的两个变量my_pointsNew和verticalSlider3.my_pointsNew如果不是同一个值，会进一步加剧冲突——两个不同变量的同步会让滑块在两个值之间反复切换。

直接修复方案 #

移除其中一个双向绑定，二选一即可：

方案1：保留[(value)]（推荐，符合ngx-slider官方用法）

<ngx-slider 
  (userChange)="onUserChange($event)" 
  [(value)]="verticalSlider3.my_pointsNew" 
  [options]="verticalSlider3.options"
></ngx-slider>

方案2：保留[(ngModel)]

<ngx-slider 
  [(ngModel)]="my_pointsNew" 
  (userChange)="onUserChange($event)" 
  [options]="verticalSlider3.options"
></ngx-slider>

额外排查点 #

• 检查onUserChange方法：如果在这个回调里直接修改了绑定的滑块值（比如verticalSlider3.my_pointsNew），会额外触发UI更新，可能导致循环。建议把回调里的修改逻辑改成异步（比如用setTimeout包裹），或者改用中间变量中转值。
• 验证配置合理性：确认verticalSlider3.options中的min、max、step设置与绑定值的类型匹配（必须是数字类型），不合理的配置可能导致滑块位置计算错误。
• 检查容器布局：如果是垂直滑块，确保滑块所在容器有足够的固定高度，容器高度不足可能导致滑块位置计算异常。

内容的提问来源于stack exchange，提问作者SimonIoa