Как отключить часть слайдера угловой материал

Question

Для части проекта, над которым я работаю, я хочу иметь возможность создать ползунок, показывающий возрастной диапазон от 0 до 100 лет, но ползунок должен остановиться в определенный момент, например, в 18 лет.

Я все еще хочу показать 0-18, но пользователь должен иметь возможность скользить только в возрасте от 19 до 100.

В проекте используются угловые материалы, но я не вижу никакого способадобиться того, чего я хочу.Я уже попробовал Документацию https://material.angular.io/components/slider/overview и поиск через Google, но не повезло.

Вот код

<mat-slider min="0" max="100" step="1" value="20"></mat-slider>

Это то, что я хочу сделать

<mat-slider min="0" max="100" start="19" end="100" step="1" value="20"></mat-slider>

Answer 1

Не думаю, что есть хороший способ сделать это, но есть неуклюжий способ. Вы можете прослушать событие изменения, когда большой палец отпущен, а затем установить значение обратно на ваш минимум. Проблема в том, что пользователь все еще может перетащить ползунок и отпустить его при значениях ниже вашего минимума, а когда он это делает, он просто возвращается к минимуму. Также нет визуальной индикации минимума или причины его отскока (вам нужно что-то добавить в свой интерфейс).

<mat-slider min="0" max="100" step="1" value="20" (change)="sliderChange($event)">
</mat-slider>

sliderChange(event) {
    if (event.value < 19) {
        setTimeout(() => event.source.value = 19);
    }
}

Вы также можете использовать ту же технику для события (ввода) (каждый раз, когда большой палец перемещается), но это ведет себя немного хаотично.

Answer 2

ссылка: - https://stackblitz.com/edit/angular-material-qpmnph?file=app%2Fapp.component.ts

*. Component.ts

  min = '0';
  max = '100';
  step ="1";
  value ="20";

  slideIt(e) {
    if (e.value < this.value) {
         e.source.value = this.value;
    }
}

*. Component.html

<mat-slider [min]="min" [max]="max" [step]="step" [value]="value" (change)="slideIt($event)"></mat-slider>