title: Angular 2: No UI Slider - How to change color?
body: <p>I'm using ng2-nouislider in my angular 2 app</p>
  
  <p>I trying to change the color between the slider handles by following this example: <a href="https://refreshless.com/nouislider/examples/#section-colored-connect" rel="nofollow noreferrer">section-colored-connect</a></p>
  
  <p>In my HTML I've</p>
  
  <pre><code>&lt;nouislider #slider [config]="someKeyboardConfig"&gt;&lt;/nouislider&gt; 
  </code></pre>
  
  <p>and in .ts</p>
  
  <pre><code>@ViewChild('slider') slider;
  
    someKeyboardConfig: any = {
      behaviour: 'drag',
      connect: [true, true, true, true, true],
      start: [20, 40, 60, 80],
      keyboard: true,  // same as [keyboard]="true"
      step: 0.1,
      pageSteps: 10,  // number of page steps, defaults to 10
      range: {
        min: 0,
        max: 100
      },
      pips: {
        mode: 'count',
        density: 2,
        values: 6,
        stepped: true
      }
    };
    ngAfterViewInit() {
      this.func();
    }
  
    func() {
      var connect = this.slider.querySelectorAll('.noUi-connect');
      var classes = ['c-1-color', 'c-2-color', 'c-3-color', 'c-4-color', 'c-5-color'];
      console.log(connect.length);
      for ( var i = 0; i &lt; connect.length; i++ ) {
        connect[i].classList.add(classes[i]);
      }
    }
  </code></pre>
  
  <p>styles.css </p>
  
  <pre><code>.c-1-color { background: red; }
  .c-2-color { background: yellow; }
  .c-3-color { background: green; }
  .c-4-color { background: blue; }
  .c-5-color { background: purple; }
  </code></pre>
  
  <p>but it's not working. What am I doing wrong here?</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>I see error in console</p>
  
  <pre><code>ERROR TypeError: this.slider.querySelectorAll is not a function
      at VitalSettingsComponent.webpackJsonp.../../../../../src/app/vitals/vital-settings/vital-settings.component.ts.VitalSettingsComponent.func (vital-settings.component.ts:98)
      at VitalSettingsComponent.webpackJsonp.../../../../../src/app/vitals/vital-settings/vital-settings.component.ts.VitalSettingsComponent.ngAfterViewInit (vital-settings.component.ts:62)
      at callProviderLifecycles (core.es5.js:11182)
      at callElementProvidersLifecycles (core.es5.js:11157)
      at callLifecycleHooksChildrenFirst (core.es5.js:11141)
      at checkAndUpdateView (core.es5.js:12246)
      at callViewAction (core.es5.js:12603)
      at execEmbeddedViewsAction (core.es5.js:12561)
      at checkAndUpdateView (core.es5.js:12239)
      at callViewAction (core.es5.js:12603)
  </code></pre>