onSlideEnd component return the previous value, not the selected ones in range mode

[ftimurs]

It seems that when calling onSlideEnd in a slider, it returns the value where the slider started, not where it ends. I'm assuming that's not what is expected, since I'm personally always more interest in the current values than the starting ones.

If this is the intentional behavior, what is the best practice to get the current values via the onSlideEnd function?

Edit: I should specify. I'm observing this behavior in PrimeReact 9.6.1

[ThoSap]

Hi,

I could not reproduce this issue with PrimeNG 16.5.1, neither with the

• standard range example with [(ngModel)] two-way binding from the PrimeNG page
• nor with the reactive form example in range mode

See the browser console (F12 - Console) output, if I move the slider in either of these examples, the onSlideEnd(event: SliderSlideEndEvent) event binding correctly returns the current range at the end.

Which PrimeNG version are you using and could you possibly share a StackBlitz example with your code?
Just fork either one of the two examples above with your modifications.

As a workaround you could directly access the values if you add a template reference to the slider, let's say #yourSlider, e.g.

  <p-slider
    #yourSlider
    [(ngModel)]="rangeValues"
    [range]="true"
    (onChange)="change($event)"
    (onSlideEnd)="end($event)"
    styleClass="w-20rem"
  ></p-slider>

and access the slider using @ViewChild and the template reference variable string 'yourSlider' in the .ts file.

  @ViewChild('yourSlider')
  private yourSlider!: Slider;

Then you could access the value as follows, but this is not recommended from my side, as you should already get the correct values from the onSlideEnd(event: SliderSlideEndEvent) event binding.

  end(event: SliderSlideEndEvent): void {
    console.log('End from Event', event.values); // Value from the event binding emitter
    console.log('End from the Slider instance', this.yourSlider.values);
  }

As a side note, this discussion should be moved to the PrimeNG category as it does not have anything to do with PrimeFlex.

P.S. @cetincakiroglu I had to add styleClass="w-20rem" to the <p-slider/> for all of the [email protected] Slider StackBlitz examples, else only a dot was visible. This should probably be fixed.

[ftimurs]

Apologies, I should have mentioned it in my post and selected the correct tag. This is in PrimeReact, not PrimeNG.

[ftimurs]

I ended up using the onSlideEnd function in a useEffect to work around the issue:

export default function SizeFilters({label, sliderValue, setSliderValue, callbackFunction}) {
  const [sliderEnd, setSliderEnd] = useState(false)

  useEffect(() => 
  {
    if(sliderEnd){
    callbackFunction()
    setSliderEnd(false)
  }
  },[sliderEnd, callbackFunction])

  return (
    <div className='flex'>
      <div className='flex flex-column w-full px-4'>
        <div className='flex w-full my-2'>
          <label>{sliderValue[0]}</label>
          <div className='w-full flex justify-content-center'><label>{label}</label></div>
          <label>{sliderValue[1]}</label>
        </div>
        <Slider className='w-full' value={sliderValue} onChange={(e) => {setSliderValue(e.value)}} range onSlideEnd={() => setSliderEnd(true)}/>
      </div>
    </div>
  )
}

The callback function uses the sliderValues in the way that I was intending to use the return values of the onSlideEnd return value. So, not entirely elegant, but it works.

[melloware]

@ftimurs it was fixed in 9.6.2.: primefaces/primereact#4680

[ftimurs]

I just tried with 9.6.3 and it's not working as intended. Gives the previous value, not the current one.

[melloware]

@ftimurs here is a 9.6.3 reproducer looks like its working to me: https://codesandbox.io/s/primereact-demo-forked-tqpjw6?file=/package.json

[ftimurs]

@melloware ah, you are correct. As part of my workaround I forgot to undo something to make it work. Apologies.

[melloware]

No problem!