Search code examples
javascriptplotlyplotly-pythonplotly.js

Continuous slider without steps with Plotly

Is there a way to create a continous slider with Plotly.js, with float values?

All examples I have seen in https://plotly.com/javascript/sliders/

  • are with steps
  • require a pre-computing of the traces for every step, which is not possible in my case, I'm using thousands of steps

Example: we want to plot the function x^alpha for x = 0..1, and have a continuous slider for alpha between 0.1 and 10.

How would you do this with Plotly.js only?

Solution

  • A real continuous slider can't really exist in the digital world (vs analogical), as it's impossible to consider all the real numbers lying in an arbitrary range nor to trigger events for all possible transitions. In the end it always relies on a range of discrete values.

    Still, you could improve the precision of the slider by incrementing the number of steps in the given range, for example if the precision has to be in percent, one obviously needs 100 values between 0 and 1 :

    nsteps = 100
slider = { 'steps': [{ 'value': step/nsteps } for step in range(nsteps + 1)] }

    Example with values in the range [ 0.1, 10 ] and a higher precision, using numpy.linspace for convenience :

    nsteps = 10**5
slider = { 'steps': [{ 'value': step } for step in np.linspace(0.1, 10, nsteps)] }

    Not sure how the front-end will behave with very high precision though, it must depend on how changes are detected, how the corresponding events are emitted by Plotly.js (at which rate), and above all what happens in the handler.