change event is continuously triggered while dragging

[khaledjendi]

Hi,

I did same implementation as in the demo for the range slider. The problem is the change event is keep triggered continuously while dragging. How can I keep it triggered only once after I finish dragging the slider bullet?

I am using angular 5.2.0 I included a snapshot for the console of change event below.

[Amarnath510]

@jSchnitzer1 Were you able to solve this issue? It's been 5 days and no one replied so thought of asking. I currently have the same problem and was looking out for a solution.

Below is my implementation, the slider just emits before the drag is completed and I think I need to fix it in rangeChanged method but was not sure how to solve this.

<nouislider [connect]="true"
            [min]="minimum"
            [max]="maximum"
            [config]="{margin:step}" 
            [keyboard]="true"
            [step]="step"
            [(ngModel)]="range"
            (ngModelChange)="rangeChanged($event)">
</nouislider>

rangeChanged(updatedRange): void {
    console.info(updatedRange);
}

[lgoudriaan]

I have the same error, haven't found a workaround yet

[JaimicoVII]

A workaround i found is this:

• Wrap the <nouislider> tag with an HTML element of your choice (span, div)

<div>
   <nouislider [(ngModel)]="someRange"></nouislider>
</div>

• Then bind a mouseUp listener to the wrapper

  <div (mouseup)="mouseTest()">
  <nouislider [(ngModel)]="someRange"></nouislider>
  </div>

• Finally in the component , the function your calling from the event binding

  mouseTest() {
  console.log(this.someRange);
  }

Of course the value of the property someRange is updated on every ngModelChange (while your dragging), but with this workaround you can have an event when drag is over (when mouse button is released)

Hope it helps @lgoudriaan, @Amarnath510, @jSchnitzer1

[lgoudriaan]

@JaimicoVII thanks for the quick answer. It works but it isn't perfect. If you drag of the wrapper element it wont work.

[MrWouter]

The way I see it, it is expected behavior to update when the slider slides. It might not be the best case scenario for all applications (especially when doing API calls based on changed slider value).

You could do something like:

<nouislider [ngModel]="someRange" (end)="updateSomeRangeAndOtherStuff($event)"></nouislider>

[lgoudriaan]

@MrWouter Thanks, I didn't know about the (end) callback

[inorganik]

You could debounce it like this:

rangeChanged(range) {
  clearTimeout(this.dragTimeout);
  this.dragTimeout = setTimeout(() => handleStopDrag(range), 200);
}

handleStopDrag(range) {
  // gets called on stop drag
}

[DanielBorel]

I have similar issue. When dragging slider, i want to call other service function by some seconds. help me~

[JoinThisBand]

The (end) callback doesn't work if the user interacts with the slider track, rather than dragging the handle. (change) only fires once the slider change event is complete and works with the track and the handle:

(change)="doSomething($event)"