PrimeNG Slider - click event

Issue

I am trying out primeng's slider component and to my surprise I found out they do not have any onClick event for the slider, nevertheless I see they have onChange and onSlideEnd events exposed for the slider.

I want to perform an http request upon value change so I did this

<p-slider
       (onChange)="doHttp($event.value)"
       [(ngModel)]="sliderValue"
       [min]="0" [max]="100" [step]="1">
</p-slider>

which causes overhead when I slide the slider since multiple http requests are triggered, I tried to change it with

<p-slider
           (onSlideEnd)="doHttp($event.value)"
           [(ngModel)]="sliderValue"
           [min]="0" [max]="100" [step]="1">
</p-slider>

but now http request is not fired upon slider click

How could I achieve the behaviour I want? Should I add any kind of delay inside onChange event through a subject before emitting the http request? It seems very strange to me that they do not have an onClick event about the slider bar, so do I miss something here?

Thanks in advance

Solution

You can use rxjs debounceTime to reduce the number of calls made!

import { Component } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Component({
  selector: 'slider-basic-demo',
  templateUrl: './slider-basic-demo.html',
})
export class SliderBasicDemo {
  private subscription = new Subscription();
  value!: number;
  private sliderSubject: Subject<void> = new Subject();

  ngOnInit() {
    this.subscription.add(
      this.sliderSubject.pipe(debounceTime(500)).subscribe(() => {
        // do API call here!
        alert(this.value);
      })
    );
  }

  doHttp(value: any) {
    this.sliderSubject.next();
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

stackblitz

Answered By - Naren Murali