1

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?

Basj
  • 41,386
  • 99
  • 383
  • 673
  • Use the same way as your bounty question :) – Hamzah Nov 16 '22 at 18:09
  • Yes @Hamzah, you're right, your [answer](https://stackoverflow.com/a/74191965) uses a FloatSlider indeed :) But I would be interested in a pure JS solution, without ipywidgets, just PlotlyJS. – Basj Nov 16 '22 at 19:19
  • Not my solution, it is the solution of the accepted answer. It is pure JS solution. – Hamzah Nov 16 '22 at 19:38
  • @Hamzah Do you mean [this one](https://stackoverflow.com/questions/74191241/multiple-imshow-on-the-same-plot-with-opacity-slider/74317122#74317122)? I don't know how to reproduce this in pure JS. – Basj Nov 17 '22 at 14:00
  • Why do you think that the best option is to use slider? – Hamzah Nov 21 '22 at 14:50
  • With continuous values, you should use an input box for the user to enter the floating value, and you should select a numerical input box to limit the type of values. – Hamzah Nov 21 '22 at 14:52
  • Sliders are appropriate with discrete and small number of values that what I studied in the data visualization course :) – Hamzah Nov 21 '22 at 14:53
  • @Hamzah Yes a 100% pure JS solution of a slider would be interesting, I created a bounty for this reason :) – Basj Nov 21 '22 at 15:30

1 Answers1

1

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.

EricLavault
  • 12,130
  • 3
  • 23
  • 45
  • I think he has something more complex than this easy equation mentioned in his question. I think you can update your previous answer on his bounty question, but in Plotly JS. – Hamzah Nov 22 '22 at 06:51
  • @Hamzah I was planning to update my answer anyway to bring further details and some code for plotting `x^alpha` in JS. But in the meantime I realized the situation is quite different here, even with this simple example : the slider, by changing alpha, would also affect the output of the function, which implies computing one trace for each step and redrawing the plot when the slider moves (unlike with the opacity which does not affect data). So I guess the result cannot be as smooth as in the other bounty question.. I will try tomorrow and update accordingly. – EricLavault Nov 22 '22 at 19:04