如何在页面加载时将Ngx-slider值设为NaN，取消初始起点

我使用ngx-slider组件时，希望用户能从滑块任意位置拖拽，但当前滑块初始起点始终固定为0，需要移除这个强制的初始起点。

原问题代码 #

value: number = NaN;
highValue: number = NaN;
sliderArray = [
  { legend: 'a', value: 0 },
  { legend: 'b', value: 1 },
  { legend: 'c', value: 2 },
  { legend: 'd', value: 3 },
];

get options() {
  return {
    showTicks: true,
    stepsArray: this.sliderArray,
    hidePointerLabels: true,
    hideLimitLabels: true,
    // noSwitching: true
  };
}

getEvent(e: ChangeContext) {
  if (Number.isNaN(e.value) && e.highValue > 0) {
    this.value = e.highValue;
  }
}

<ngx-slider
[(value)]="value"
(userChange)="getEvent($event)"
[(highValue)]="highValue"
[options]="options"
></ngx-slider>

解决方案 #

问题根源在于组件默认会将NaN初始值转换为0，且未启用防止指针自动切换的配置。以下是修改步骤：

1. 启用noSwitching配置：防止滑块指针自动交换位置，确保点击任意刻度时直接激活对应指针。
2. 调整初始值类型：将NaN改为null，符合组件类型预期，避免自动转换为0。
3. 优化事件处理与绑定方式：使用单向绑定配合userChange事件手动控制值，避免组件默认初始化逻辑强制锁定起点。

修改后的代码 #

import { ChangeContext } from '@angular-slider/ngx-slider';

// ...

value: number | null = null;
highValue: number | null = null;
sliderArray = [
  { legend: 'a', value: 0 },
  { legend: 'b', value: 1 },
  { legend: 'c', value: 2 },
  { legend: 'd', value: 3 },
];

get options() {
  return {
    showTicks: true,
    stepsArray: this.sliderArray,
    hidePointerLabels: true,
    hideLimitLabels: true,
    noSwitching: true, // 核心配置：禁止指针自动切换
  };
}

getEvent(e: ChangeContext) {
  // 直接根据用户操作更新指针值
  if (e.value !== null) this.value = e.value;
  if (e.highValue !== null) this.highValue = e.highValue;
}

<ngx-slider
  [value]="value"
  [highValue]="highValue"
  (userChange)="getEvent($event)"
  [options]="options"
></ngx-slider>

说明 #

• noSwitching: true：阻止组件在拖拽时自动交换两个指针的位置，确保用户点击任意刻度时，对应的指针立即响应，不会默认跳转到0。
• 单向绑定[value]/[highValue]：避免双向绑定带来的组件自动初始化逻辑，完全由事件处理控制值的更新。
• 初始值设为null：明确表示滑块初始无选中状态，组件不会自动将其转换为0。

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