Wj-linear-gauge: valueChanged only when I release the mouse

Wj-linear-gauge: valueChanged only when I release the mouse

Posted by: lucas.gagneten on 27 March 2019, 8:50 am EST

• 

  lucas.gagneten

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 27 March 2019, 8:50 am EST

  Hello.
  
  I have a Linear Gauge whose value can be modified with the mouse, implemented in Angular:

  
  <wj-linear-gauge  [(value)]="dataDensity"
                                  (valueChanged)="onDataDensityChanged()"
                                  [origin]="0"
                                  [min]="1"
                                  [max]="10"
                                  [step]="1"
                                  [isReadOnly]="false"
                                  [thickness]=".1"
                                  [thumbSize]="25"
                                  [showText]="'Value'"
                                  [showRanges]="false"
                                  placement="top">
    </wj-linear-gauge>
  
  

  Suppose I move the thumb from 1 to 10 with the mouse: The function “onDataDensityChanged()” is called several times, If I use the “valueChanged” event.
  
  I want to call (or run) the function “onDataDensityChanged()” only when I release the mouse, so the function is run only once.
  
  How could I do that? Maybe using the property “isTouching” (I don’t know how to use it)?
  
  Thank you.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 28 March 2019, 9:33 am EST

  Hi,

  You may simply handle the native mouseup event and perform the required action. Please refer to the following sample demonstrating the same and let us know if you face any issues:
  
  https://stackblitz.com/edit/angular-wcmhaj?file=src%2Fapp%2Fapp.component.ts

  ~Sharad

• 

  lucas.gagneten

  • Post Options:
  • Link
    Copy

  Posted 6 May 2019, 2:58 pm EST

  Thanks!