In plotly.js, how may I get call a javascript callback called when a slider is changed,

[pdenapo]

0

I want to build a web page in plotly.js for plotting a mathematical function depending on some parameters. I want the user to be able to change it using a slider.

For doing this, I need to call my own javascript function (to recalculate the points of the graph), get the current value of the slider and update the graph.

I’ve looking at the examples in

Slider

but none of them does what I need, and the documentation at

Layout.sliders

is not clear at all. It seems that I need to set the “method” property (also “args”). It says

“Sets the Plotly method to be called when the slider value is changed. If the skip method is used, the API slider will function as normal but will perform no API calls and will not bind automatically to state updates. This may be used to create a component interface and attach to slider events manually via JavaScript.”

What does it mean?

I already have an application using plotly dash at

pdenapo/normal_bivariada/blob/main/normal_bivariada_interactiva.py

and it is very easy to do using @app.callback.

However, I want to do the same in javascript (since I want to run it on a web server, where I cannot run a python application).

¡Many thanks for any help!

[pdenapo]

I have found an answer in

Trigger Slider event

I am using the basic slider example to show my scatterplots with time slider. Is there a way to capture the events on slider change ? I would like to call my APIs and do some other operations (not related to plotly chart). Have seen solutions adding new trace, but my problem is much simpler that I need to call my function on slider change event. Regards, Rizwan

It is very tricky. The documentation should provide an example of this common task. If you have many slidders, you should
set a name property for each and check its name as in this code

function handleSliderChange(e) {
let sliderName=e.slider.name
let stepLabel = e.step.label
if (sliderName==‘a’)
{
console.log(“a=”,stepLabel)
}
else if (sliderName==‘b’)
{
console.log(“b=”,stepLabel)
}
}

[el.camino]

I am running into a similar issue, and I’m not sure how to fix it given the solution you provided.

I would like to have multiple parameters controlled by different sliders, and the data plotted should be updated by each of the slider current values. The issue is, I must define all of the slider steps, which calls the function to update the plot data through the “arg” key, before the sliders are in use and then the data value is not set by the current state of each slider. How can I have the “handleSliderChange” function also call the Plotly update method with the new data values?

Thanks for any help!