Cancel Slider Event

UI Components for Angular
Post Reply
sugarloafdesign
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>
Thanks

Gary

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

27 Jan 2023, 15:13

Hi,

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

event.preventDefault()
method on the

Code: Select all

event
object passed to the

Code: Select all

onChange 
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) {
    event.preventDefault();
  }
}
However, it is important to note that in this example

Code: Select all

event
object is undefined.
The

Code: Select all

$event
in your code refers to the

Code: Select all

value
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) {
    return;
  }
}
You can also make use of the

Code: Select all

(onSlideEnd)
event instead of

Code: Select all

(onChange)
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.


Thanks
Thanks
James Millere

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 8 guests