Cannot change a slider's current value with JS code

plotly.js
1

Hi,
I can’t change a slider’s current value with JS code: it has no effect: see Edit fiddle - JSFiddle - Code Playground
Any idea?

<meta charset="utf8">
<script src="https://cdn.plot.ly/plotly-latest.js"></script>
<div id="myDiv"></div>
<div id="clickMe">Click me to set to value 20!</div>
<script>
var steps = [];
for (var i = 0; i < 100; i++) 
    steps.push({label: i, method: "skip"});
Plotly.newPlot("myDiv", [{ "y": [1, 2, 3] }], {sliders: [{ steps: steps, active: 10 }]}, {});
document.getElementById("clickMe").onclick = () => {
    document.getElementById("myDiv").layout.sliders[0].active = 20;
    console.log(document.getElementById("myDiv").layout.sliders[0]);
}
</script>
2

Hello @stamljf,

Plotly creates react, so you can’t update via JS directly.

You’ll need to use these for interaction:

3

I am no expert, so take this with a pinch of salt …

I wanted to do what you suggest and could not find a way of doing it in plotly.js alone. However, I did find that an HTML slider could be reset from JavaScipt:

This is the HTML for the slider (minus the <>)

input id=‘pextslider’ type=‘range’ min=‘0’ max=‘1’ step=‘0.01’ value=‘0’ class=‘slider’

And this JS line does indeed set it to zero

document.getElementById(‘pextslider’).value = 0

OK, a clumsy hack, but it did the trick! (More broadly in the end I gave up on using the plotly.js sliders/buttons etc and reverted to using HTML implementations - they seemed to be more flexible)

1 Like
4

Here is the JS to get this to move. :slight_smile:

var steps = [];
for (var i = 0; i < 100; i++)
  steps.push({
    label: i,
    method: "skip"
  });
Plotly.newPlot("myDiv", [{
  "y": [1, 2, 3]
}], {
  sliders: [{
    steps: steps,
    active: 10
  }]
}, {});
document.getElementById("clickMe").onclick = () => {
  Plotly.relayout("myDiv", {
    sliders: [{
      steps: steps,
      active: 20
    }]
  })
  console.log(document.getElementById("myDiv").layout.sliders[0]);
}
1 Like