我使用 ng5-slider 在我的网站上显示选项范围。我有一个问题。这是
默认值为“任何”。我的要求是当我点击 1 到 5+“任何”选项时不应包含在所选范围内。
例如，当您单击 3 时，它应该只显示或标记 1 到 3，但此时它会一直标记从任何到 3。如果您选择“任何”选项，它不应该允许这样一个范围，但只那个选项。
当前行为
预期行为
stackbitz：https://stackblitz.com/edit/ng5-slider-range-slider-example-wa1szn?file=src/app/app.component.ts
我需要你的专家的想法。
【问题讨论】：
为了让您更改滑块的 minValue，您需要在 html 中使用 userChange 事件。然后，在您的 userChange 方法中，您需要将 value 变量从 0 更改为 1，以便能够将最小滑块从 1 移动到 1强>任何。
我修改了您创建的stackblitz 以显示我的解决方案。
HTML - 我添加了 ng5-slider 事件绑定函数userChange 来检测滑块上的任何变化。有关 ng5-slider 事件的更多信息，请阅读here。
<ng5-slider [(value)]="value" [(highValue)]="highValue" [options]="options" (userChange)="getEvent($event)"></ng5-slider>
TS - 我创建了 getEvent 函数来获取 ng5-slider 的当前 highValue，然后如果 highValue 大于 0，则将 value 变量更改为 1。
import {
Component
} from '@angular/core';
import {
ChangeContext,
Options
} from 'ng5-slider';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
value: number = 0;
highValue: number = 0;
options: Options = {
floor: 0,
ceil: 5,
translate: (value: number): string => {
if (value === 5) {
return '5+';
}
if (value === 0) {
return 'Any';
}
return `${value}`;
},
combineLabels: (minValue: string, maxValue: string): string => {
if (minValue === 'Any' && maxValue === 'Any') return minValue;
if (minValue === '5+' && maxValue === '5+') return maxValue;
if (minValue === maxValue) return minValue;
else return minValue + ' - ' + maxValue;
},
};
constructor() {}
getEvent(e: ChangeContext) {
if (e.highValue > 0) {
this.value = 1;
}
}
}
【讨论】：