title: Get values of multiple ngx-slider objects that are defined in ngfor
body: <p>I want users to rate several questions from strongly disagree to strongly agree via range slider. Since I have several questions, I used ngFor to show questions and generate corresponding sliders as following:</p>
  <pre><code>&lt;table class=&quot;table&quot; id=&quot;statementTable&quot;&gt;
    &lt;tbody *ngFor=&quot;let item of statements.slice(index, index+3);  let i = index&quot;&gt;
      &lt;tr&gt; &lt;td&gt;{{i+1}}.&lt;/td&gt;  &lt;td&gt;{{ item.text }} &lt;/td&gt;  &lt;td&gt;&lt;/td&gt; &lt;td&gt;&lt;/td&gt; &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt; Disagree &lt;/td&gt;
          &lt;td&gt; &lt;ngx-slider class=&quot;form-range&quot; [(value)]=&quot;value&quot; [options]=&quot;options&quot;  id=&quot;slider{{i+1}}&quot;&gt;&lt;/ngx-slider&gt; &lt;/td&gt;
          &lt;td&gt; Agree &lt;/td&gt;  &lt;td&gt;{{value}}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <p>I want to show the value of each slider beside it when a user is moving the slider. However, currently if the user moves one of the sliders, the rest also move and get the same value!
  How can I make them independent, so that each one changes only if the user changes it, and also each one shows its own value.</p>
  <p>I'm using Angular10 and here is the .ts file:</p>
  <pre><code>import { Component } from '@angular/core';
  import { Options } from '@angular-slider/ngx-slider';
  
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
   constructor() { }
   statements = [
         { text: 'statement1' },
         { text: 'statement2' },
         { text: 'statement3' },
         { text: 'statement4' },
         { text: 'statement5' },
   ];
  
   value: number = 4;
   options: Options = {
     floor: 1,
     ceil: 7
   };
  }
  
  </code></pre>
  <p>Thanks in advance!</p>