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