Black Lives Matter. Please consider donating to Black Girls Code today.

Capture currently selected slider value

Hi,

I have a (probably) very simple question: is there a way to capture the currently selected slider value?

Here is a working example:


var data = [{
  type: "pie",
  values: [0, 5, 5, 10, 03],
  labels: ['Asset A', 'Asset B', 'Asset C', 'Asset D', 'Asset E'],
  hole: 0.25,
  pull: [0.1, 0, 0, 0, 0],
  direction: 'clockwise',
  marker: {
    colors: ['#CDDC39', '#673AB7', '#F44336', '#00BCD4', '#607D8B'],
    line: {
      color: 'black',
      width: 3
    }
  },
  textfont: {
    family: 'Lato',
    color: 'white',
    size: 18
  },hoverinfo: 'label+percent',
    hovertemplate: '<b> You selected</b>'+
    '<b><br>%{percent}</b>' + 
    '<br><b>of  %{label}</b>',
  hoverlabel: {
    bgcolor: 'black',
    bordercolor: 'black',
    font: {
      family: 'Lato',
      color: 'white',
      size: 18
    }
  }
}];
  
  
 //this gives me a range function
 const xah_range = ((min, max, step = 1) => (Array(Math.floor((max - min)/step) + 1) . fill(min) . map ( ((x, i) => ( x + i * step )) )));
  var MyPercents =  xah_range(0, 50, 10);



 var sliderSteps = [];
  for (i = 0; i < MyPercents.length; i++) {
    sliderSteps.push({
      method: 'animate',
      label: MyPercents[i], 
      args: [[MyPercents[i]], {  
        mode: 'immediate',
        transition: {duration: 300},
        frame: {duration: 300, redraw: true},
      }]
    });
  }
 
 
 
  var frames = [];
  for (i = 0; i < MyPercents.length; i++) {
    frames.push({
      name: MyPercents[i],
      data: [{values: [MyPercents[i], 5, 5, 10, 3], pull: [0.1, 0, 0, 0, 0],
      'line.color': MyPercents[i]}]
    })
  }


 
 
 
var layout= {
    sliders: [{
      pad: {t: 30},
      x: 0.05,
      len: 0.95,
      currentvalue: {
        xanchor: 'right',
        prefix: 'color: ',
        font: {
          color: '#888',
          size: 20
        }
      },
      transition: {duration: 500},
      steps: sliderSteps,
    }]
  } 
  
     
   
  
Plotly.newPlot('myDiv', {data,layout,frames})

All I want is to capture which slider is currently selected by the user. Sofar I was not able to find anything.

Any help would be greatly appreciated!

Thanks!
Vlad