ползунок по умолчанию, который устанавливает то же значение для всех других ползунков

Question

У меня есть несколько ползунков, как показано на рисунке ниже. На этой картинке вы можете видеть один Default Slider. Этот ползунок должен установить то же значение для всех других ползунков, а также другие ползунки могут устанавливать свои собственные значения независимо от Default slider.

  my_ratings: Array<JSON> = [];
  ngOnInit() {
    this.getMyRatings();
}
  
  
  getMyRatings() {
    this.resetRatings();
    this.my_ratings = this.my_ratings || [];
    
    // show owner rating
    if (this.question.answer) {
      if (this.question.answer._user == this.userService.getValue()['_id']) {
        if (this.question.answer.all_ratings.owner.ratings.length > 0) {
          this.my_ratings = this.question.answer.all_ratings.owner.ratings;

          this.rating_factors.forEach((f, i) => f['my_rating'] = this.my_ratings[i]['score']);

        }
      }
      // get and set experts ratings in the interface 
      else {
        if (this.userService.getValue()['type'] == 'admin' && this.userService.getValue()['evaluator']) {
          let ei = this.question.answer.all_ratings.experts.map(e => e._user).indexOf(this.userService.getValue()['_id']);

          if (ei > -1) {
            this.my_ratings = this.question.answer.all_ratings.experts[ei].ratings;
            this.rating_factors.forEach((f, i) => f['my_rating'] = 
            
  this.my_ratings[i]['score']);
          }
        }
        // get and set others ratings in the interface
        else {
          let oi = this.question.answer.all_ratings.others.map(o => o._user).indexOf(this.userService.getValue()['_id']);

          if (oi > -1) {
            this.my_ratings = this.question.answer.all_ratings.others[oi].ratings;
            this.rating_factors.forEach((f, i) => f['my_rating'] = this.my_ratings[i]['score']);
          }
        }
      }

      if (!this.norelated)
        this.getRelUploads(this.question._id);
    }
  }
  
  
  resetRatings() {
    this.rating_factors['rater'] = 'me';
    this.cdRef.detectChanges();
    this.rating_factors.forEach((f, i) => f['my_rating'] = 0);
  }

<div  class="factor animated slide">
          <div class="factor-name">
            <div>
              <img [src]="factor?.icon_url" style="height:30px;width:30px;">&nbsp;
              <label class="factor-label">Default Slider</label>
              <div class="tooltip" style="display: inline;">
                <i class="fa fa-question" style="width: 15px;
                  height: 15px;
                  padding: 2px 0 0 4px;opacity:0.7;
                  float: right;color:white;background-color: var(--primarycolor);border-radius: 50%;"></i>
                <span class="tooltiptext">Set all other values</span>

              </div>
            </div>
            </div>

<div class="wrapper" id="wrapper">
          <div class="wrap">
            <input  name="range" type="range" class="range-slider__range" [(ngModel)]="masterRangeslider" 
            [ngStyle]="{ 'background': 'linear-gradient(90deg, hsl('+ (10 * masterRangeslider) +', 90%, 50%) '+ (10 * masterRangeslider) +'%, #d7dcdf 0%)'  }"
                  min="0" max="10">
            <div class="rating" [ngStyle]="{ 'left': ((10 * masterRangeslider) - 3) + '%' }">{{masterRangeslider}}</div>
          </div>
          <b>{{masterRangeslider || 0}}/10</b>
        </div>
      </div>

        
 <div *ngFor="let factor of rating_factors; let i = index" class="factor animated slide">
          <div class="factor-name">
            <div>
              <img [src]="factor?.icon_url" style="height:30px;width:30px;">&nbsp;
              <label class="factor-label">{{ factor.name }}</label>
              <div class="tooltip" style="display: inline;">
                <i class="fa fa-question" style="width: 15px;
                  height: 15px;
                  padding: 2px 0 0 4px;opacity:0.7;
                  float: right;color:white;background-color: var(--primarycolor);border-radius: 50%;"></i>
                <span class="tooltiptext">{{ factor.about }}</span>

              </div>
            </div>
<div class="wrapper" id="wrapper">
            <div class="wrap">
              <input name="range" type="range" class="range-slider__range" [(ngModel)]="factor['my_rating']" 
                    [ngStyle]="{ 'background': 'linear-gradient(90deg, hsl('+ (10 * factor['my_rating']) +', 90%, 50%) '+ (10 * factor['my_rating']) +'%, #d7dcdf 0%)'  }"
                    min="0" max="10">
              <div class="rating" [ngStyle]="{ 'left': ((10 * factor['my_rating']) - 3) + '%' }">{{factor['my_rating']}}</div>
            </div>
            <b>{{factor['my_rating'] || 0}}/10</b>
</div>
</div>

Answer 1

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

Сначала прослушайте изменения на ползунке по умолчанию (добавив change listener ):

<input  name="range" type="range" class="range-slider__range" [(ngModel)]="masterRangeslider" 
            [ngStyle]="{ 'background': 'linear-gradient(90deg, hsl('+ (10 * masterRangeslider) +', 90%, 50%) '+ (10 * masterRangeslider) +'%, #d7dcdf 0%)'  }"
                  min="0" max="10" (change)="onDefaultSliderChange()">

Во-вторых, сбросьте значения моделей всех других ползунков в вашем компоненте:

onDefaultSliderChange() {
    // Reset here all your other slider models value with the one from the default slider
    this.rating_factors.forEach((f, i) => f['my_rating'] = this.masterRangeslider);
    
    }