plotly rangeslider how to determine if range is selected

Question

Needs to know when dragging on a rangeslider is done. Adding an event on the sliderDiv on 'dragend' only yields occasional notification. Listening on the plotly_relayout gives too many events.

Answer 1

I think an event like "plotly_rangeslider_dragend" is not supported yet. So you must use a workaround.

To determine a rangeslider event you can use "plotly_relayout" and look into the eventdata-Object like the code below:

var timer=undefined;
var plotlyRelayoutEventFunction=function(eventdata){
  if( Object.prototype.toString.call(eventdata["xaxis.range"]) === '[object Array]' ) {
    console.log("rangeslider event!!");

    if(timer!==null){
      //timer is running: stop it
      window.clearTimeout(timer);
    }

    timer = window.setTimeout(function(){ 
      //fire end event
      console.log("rangeslider event ENDS");

      //reset timer to undefined
      delete timer;
      timer=undefined;
    }, 800);
  }
}

The first if statement checks if the eventdata field "xaxis.range" is an array. If yes, it is an rangeslider event. (in contrast the zoom-event is similar to that but its not an array).

To determine the end of the rangeslider event you could use a timer. If new events come in in an timerange of 800ms its not the end and the timer restarts. If the 800ms are over and no new event comed in its the rangeslider-end-event.

Of course this is not the full solution, cause a user can wait 800ms without release the slider. So you must use some mouse events too to build a really right rangeslider-end-event. Hope that leads you in a right direction. I think there are many ways to solve it.

Here is a full example in jsfiddle to that based on the plotly website example of rangesliders and fires a rangeslider-end-event to the console: https://jsfiddle.net/7d03n2k1/

EDIT:

I updadet my code: https://jsfiddle.net/7d03n2k1/1/ Cause window.setTimout(...) returns an Id and no object the code was wrong.