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

**URL:** <https://community.plotly.com/t/in-plotly-js-how-may-i-get-call-a-javascript-callback-called-when-a-slider-is-changed/70095>\
**Category:** plotly.js\
**Tags:** question\
**Created:** [November 21, 2022, 6:03am UTC](https://community.plotly.com/t/in-plotly-js-how-may-i-get-call-a-javascript-callback-called-when-a-slider-is-changed/70095 "2022-11-21T06:03:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![pdenapo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/pdenapo/32/21636_2.png) [@pdenapo](https://community.plotly.com/u/pdenapo)\
**Post date:** [November 21, 2022, 6:03am UTC](https://community.plotly.com/t/in-plotly-js-how-may-i-get-call-a-javascript-callback-called-when-a-slider-is-changed/70095/1 "2022-11-21T06:03:28Z")

</div>

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](https://plotly.com/javascript/sliders/)**
>
> Detailed examples of Slider Events including changing color, size, log axes, and more in JavaScript.

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

> **[Layout.sliders](https://plotly.com/javascript/reference/layout/sliders/)**
>
> Figure

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

> <https://github.com/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!

---

<div class="post-metadata">

**Author:** ![pdenapo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/pdenapo/32/21636_2.png) [@pdenapo](https://community.plotly.com/u/pdenapo)\
**Post date:** [November 21, 2022, 2:42pm UTC](https://community.plotly.com/t/in-plotly-js-how-may-i-get-call-a-javascript-callback-called-when-a-slider-is-changed/70095/2 "2022-11-21T14:42:24Z")

</div>

I have found an answer in

> [@Trigger Slider event](https://community.plotly.com/t/trigger-slider-event/42840):
>
> I am using the [basic slider example](https://plotly.com/javascript/sliders/) 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](https://community.plotly.com/t/animate-clock-slider-for-time-series-chart/18547) 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)  
}  
}

---

<div class="post-metadata">

**Author:** ![el.camino](https://avatars.discourse-cdn.com/v4/letter/e/8baadc/32.png) [@el.camino](https://community.plotly.com/u/el.camino)\
**Post date:** [September 19, 2023, 5:47am UTC](https://community.plotly.com/t/in-plotly-js-how-may-i-get-call-a-javascript-callback-called-when-a-slider-is-changed/70095/3 "2023-09-19T05:47:33Z")

</div>

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!