Question

我试图让角垫滑块平滑地滑动，但是当释放时会捕捉到最近的刻度线。

我在这里有一个半工作的演示：https://github.com/Jeff-Stapleton/Snapping-Mat-Slider

我像这样定义我的滑块：

<mat-slider
    class="example-margin"
    [disabled]="disabled"
    [invert]="invert"
    [max]="2"
    [min]="0"
    [step]="0.02"
    [tick-interval]="50"
    [(ngModel)]="value">
</mat-slider>

我对value进行双向数据绑定我尝试拦截设置并获取值以确保值始终舍入到最接近的刻度：

get value(): number {
  return Math.round(this._value);
}

set value(v) {
  if (this.task !== undefined) {
    this.task.unsubscribe();
  }
  this.task = Observable.interval(500).subscribe(() => {
    v = Math.round(Number(v));
    this._value = v;
  });
}

我甚至设置和间隔以确保我的更改始终生效。然而，即使是现在，它只能在90％的时间内起作用。滑块将保持在释放时的位置，而不是捕捉到最近的刻度线。当我检查开发人员工具中的value时，它正确舍入到最近的刻度，但滑块未反映ngModels当前状态。

Answer 1

我想也许你过度复杂了。这简单得多：

_value = 0;
get value() {
    return this._value;
}
set value(v) {
    this._value = v;
    const roundedValue = Math.round(this._value);
    if (roundedValue !== this._value) {
        setTimeout((me, newValue) => {
            me._value = newValue;
        }, 0, this, roundedValue);
    }
}

您不需要使用getter和setter for step和tickInterval，或者Observable和Subscription，只需将value属性更新为超时中的舍入值。

光滑的滑动垫滑块可以捕捉到蜱虫

1 个答案: