Event triggered when the slider value changes (no drag)

[brice]

Hello,

Is there an event triggered when the value of a slider changes?

I know I can use the following code when the user drags the slider:

slider.on('drag', function() {
   doSomething();
});

But this doesn't work when I start a slider animation without dragging the slider:

<div id ="canvas_0" class="jxgbox" style="width:100%; height:400px;"></div>
<script>
   var canvas0 = JXG.JSXGraph.initBoard('canvas_0', {"boundingbox":[-10,10,10,-10], "axis":true});
   var slider1 = canvas0.create('slider',[[-4, 2],[4,2],[-5,1,5]],{name:'a'});
   slider1.on('move', function() {
      alert("in");
   });
   slider1.startAnimation(1, 20);
</script>

In the above example, the alert("in") method is never called. I tried 'move', 'drag', 'update' events but I don't get the expected result.

Thanks for your help

[Alfred Wassermann]

Indeed, there is no event "move" for sliders. But it is a good suggestion to have it.

Until then, you can try if the event "update" for the sub-object coords works:

   var slider1 = canvas0.create('slider',[[-4, 2],[4,2],[-5,1,5]],{name:'a'});

   slider1.coords.on('update', function() {

      alert("in");
   });
   slider1.startAnimation(1, 20);

Best wishes,

Alfred

[brice]

It works! thank you Alfred.

But in this case, how to detect when the slider coordinates stop updating? I tried the following code but it doesn't work:

slider1.on('up', function() {
   alert("in");
});

Thank you

[Alfred Wassermann]

Sorry, I do not fully understand the problem.

I assume you added a stop button which calls "slider1.stopAnimation()".

Isn't that the place where you know that the slider updating hs a stopped?

Best wishes,

Alfred

[appeo...@hotmail.com]

Hey,
I am also looking for ways to trigger an event ONLY when the slider value is changed. I think it could reduce the amount of updates and speed up things a bit.

So a slider with a lower precision and bigger snapWidth doesn't trigger an update unless the slider point has actually jumped a tick or the value is changed. I think in the slider.coords.on('update'.. case it is updated on every pixel dragged even if it is not visually apparent? I've tried working around it by calling slider.Value() and comparing it on every update but probably there is prettier ways to do this.


I made a fiddle to visualize it:
http://jsfiddle.net/c4dv7h5q/5/


/Andreas

[Alfred Wassermann]

Very good point!
I patched the code such that 'drag' events are only fired if the pixel position of the dragged point is changed. You can try it out in today's nightly build. The event to catch in your jsfiddle is then:

slider1.on('drag', function() {
   value1 += 1;
   num1.innerHTML = value1;
});

Best wishes,
Alfred

[appeo...@hotmail.com]

ah, that's great!
I will try it out. Thank you!