ng5-slider 根据条件更改最小值和最大值

Question

我已经使用 ng5-slider 在我的网站上显示选项范围。我有一个问题。这是

默认值为“任意”。我的要求是，当我点击 1 到 5+ 个“任何”选项时，不应包含在 selected 范围内。

例如，当您单击 3 时，它应该只显示或标记 1 到 3，但此时它会标记从任何到 3。如果您 select“任何”选项，它应该不会这么低的范围，但只有那个选项。

当前行为

预期行为

堆栈位：https://stackblitz.com/edit/ng5-slider-range-slider-example-wa1szn?file=src/app/app.component.ts

我需要你的专家意见。

Answer 1

为了更改滑块的最小值，您需要在 html 中使用 userChange 事件。然后，在您的 userChange 方法中，您需要将 value 变量从 0 更改为 1，以便能够将最小滑块移动到 1 来自 ANY.

我修改了您创建的 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 的当前高值，然后将 value 变量更改为 1 如果highValue 大于 0。

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;
    }
  }
}

ng5-slider 根据条件更改最小值和最大值

ng5-slider change the min and max values based on conditions

angular

angular9