Change Handle color according to value

[agam16]

How can i change the handle color as the value changes for slider

[kiqq]

One of possible solutions: app.component.html:

<nouislider #slider [config]="someConfig" [(ngModel)]="someRange" (update)="onUpdate($event)">
</nouislider>

app.component.ts:

import { Component, ViewChild, ElementRef, Renderer2, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('slider', { read: ElementRef }) slider: ElementRef;

  someRange;
  someConfig: any = {
    start: [24, 255],
    step: 1,
    range: {
      min: 0,
      max: 255
    }
  }

  firstHandle: Element;

  constructor(private renderer: Renderer2) { }

  ngAfterViewInit() {
    this.firstHandle = this.slider.nativeElement.querySelector('.noUi-handle[data-handle=\'0\']'); //0 - handle index
  }

  onUpdate(event) {
        this.renderer.setStyle(this.firstHandle, 'background', 'rgb(255, 255, ' + event[0] + ')'); //0 - handle index
  }
}

[saranshchat]

@kiqq running your code I am getting error-cannot read property 'querySelector' of undefined. Can you provide some more things. Thanks in advance.

[agam16]

I did it by adding ngClass according to the model value. And then added the css accordingly for all classes

[kiqq]

@saranshchat I am so sorry. I skipped some code focusing on the concept causing that I forgot some important parts. I updated my earlier comment to show full code so it will hopefully work for you. Please tell me if everything is ok now.

[saranshchat]

@kiqq error is showing in- cannot read prooerty 'querySelector' of undefined. Its is not working