Блог

Я использовал ng5-слайдер для отображения диапазона опций на своем веб-сайте. У меня есть одна проблема с этим. Который

значение по умолчанию — «Любое». Требование, которое я предъявляю, заключается в том, что при нажатии от 1 до 5 опция «Любой» не должна включаться в выбранный диапазон.

Например, когда вы нажимаете 3, он должен отображаться только или отмечаться от 1 до 3, но в данный момент он будет отмечаться полностью от любого до 3. Если вы выберете опцию «Любой», он не должен указывать диапазон, а только этот параметр.

Текущее поведение

Ожидаемое поведение

стакбиц : https://stackblitz.com/edit/ng5-slider-range-slider-example-wa1szn?file=src/app/app.component.ts

Мне нужна идея вашего эксперта.

Для того, чтобы вы могли изменить минимальное значение вашего слайдера, вам необходимо использовать userChange событие в вашем html. Затем в вашем методе userChange вам нужно изменить value переменную с 0 на 1, чтобы можно было переместить минимальный ползунок на 1 из ЛЮБОГО.

Я изменил созданный вами стекблитц, чтобы показать свое решение.

HTML — Я добавил функцию привязки событий ng5-слайдера userChange для обнаружения любых изменений на слайдере. Для получения дополнительной информации о событиях ng5-слайдера, пожалуйста, прочитайте здесь.

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

TS — Я создал getEvent функцию, чтобы получить текущее высокое значение ползунка ng5, а затем изменить 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' amp;amp; maxValue === 'Any') return minValue;
      if (minValue === '5 ' amp;amp; maxValue === '5 ') return maxValue;
      if (minValue === maxValue) return minValue;
      else return minValue   ' - '   maxValue;
    },
  };

  constructor() {}

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