Cancel Slider Event

UI Components for Angular
Post Reply
Posts: 9
Joined: 02 Jul 2021, 11:22

08 Dec 2022, 18:49

I am using the p-slider in PrimeNG(13.4.1)
I have the slider working but there are some cases where I want to cancel the slider event.
Can this be done? When I look at the onChange event it contains two properties... 'event' and 'value'. value is always set to the slider value the user has moved the slider to. event is always undefined though, there appears no way of cancelling the action.

Is this true or am I missing something?

Here is the html I am using

Code: Select all

<p-slider [(ngModel)]="overlayMagnificationPercentage" [min]="minMagnification" [max]="maxMagnification" [step]="magnificationInterval" (onChange)="handleSliderMagnificationChange($event)"></p-slider>


Posts: 3
Joined: 27 Jan 2023, 14:55
Location: USA

27 Jan 2023, 15:13


I'm not much familiar with it but yes I can help you to get out of this.

You can cancel the slider event by using the

Code: Select all

method on the

Code: Select all

object passed to the

Code: Select all

event handler. This method will prevent the default behavior of the event, which in this case is updating the value of the slider.

You can follow this example on how you can use this method to cancel the slider event:

Code: Select all

handleSliderMagnificationChange(event) {
  if (cancelEvent) {
However, it is important to note that in this example

Code: Select all

object is undefined.

Code: Select all

in your code refers to the

Code: Select all

object, which is the current value of the slider.

You can pass the value as a parameter and check if the condition met and then prevent the event.

Code: Select all

handleSliderMagnificationChange(value: number) {
  if (value === some_value) {
You can also make use of the

Code: Select all

event instead of

Code: Select all

which will trigger when the user releases the slider, allowing you to check the value and prevent the event if necessary.

Code: Select all

<p-slider [(ngModel)]="overlayMagnificationPercentage" [min]="minMagnification" [max]="maxMagnification" [step]="magnificationInterval" (onSlideEnd)="handleSliderMagnificationChange($event)"></p-slider>
Also, you can check the PrimeNG documentation or community forum for more information on how to handle the slider events.

James Millere

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 16 guests