Add slider events

[rreusser]

Due to a lack of events, sliders that execute custom code in pure JS are very difficult. This PR adds events to sliders:

• plotly_sliderstart: emitted when the slider receives a mousedown event
• plotly_sliderchange: emitted when the slider receives interaction that changes the selected value. Data contains interaction: true | false in order to indicate whether the change was the result of user interaction of some other state change like bindings.
• plotly_sliderend: emitted on mouseup

[etpinard]

@rreusser can you give a real world example of these events in action?

[rreusser]

change would be useful for hooking into a play button. Like performing external updates as an animation progresses. It's more of a notification that the slider moved.

dragmove is similar except restricts this to only events that were the result of direct input to the component, like for actually performing changes that don't fit into an API command (like computing live data and updating the plot). Perhaps this could get merged with change with the addition of a flag that denotes whether it was direct input or not.

dragstart and dragend are two that I use frequently to do something like pausing a simulation or lowering the resolution while the component is being interacted with.

here is an example where the simulation pauses during interaction.

here is an example that would greatly benefit from the ability to lower resolution while the component is being dragged for a quick preview.

[rreusser]

@etpinard what do you think of sliderstart, sliderend, and sliderchange, where sliderchange has an interaction: true | false flag that notes whether it was the result of interaction or just a more general state change (e.g. bindings)?

[etpinard]

what do you think of sliderstart, sliderend, and sliderchange, where sliderchange has an interaction: true | false flag that notes whether it was the result of interaction or just a more general state change (e.g. bindings)?

love it 👍

[rreusser]

This PR has been updated as discussed. The initial description now specifies the three events implemented.

[rreusser]

@etpinard the individual commits are a little messy since I accidentally committed the linter changes, but the end result is correct (pending circle-ci).

[rreusser]

For live example, see console output at: http://rickyreusser.com/animation-experiments/#gapminder

[etpinard]

nicely done 💃