| CARVIEW |
Select Language
HTTP/2 200
accept-ranges: bytes
access-control-allow-origin: *
age: 0
cache-control: max-age=600
content-encoding: gzip
content-type: text/html; charset=utf-8
date: Thu, 31 Jul 2025 08:10:05 GMT
etag: W/"687e6267-7fdf"
expires: Thu, 31 Jul 2025 08:20:05 GMT
last-modified: Mon, 21 Jul 2025 15:53:11 GMT
server: Vercel
strict-transport-security: max-age=63072000
vary: Accept-Encoding
via: 1.1 varnish
x-cache: MISS
x-cache-hits: 0
x-fastly-request-id: 2ccd45b28a2b6156130ac143524ecf75b080a714
x-github-request-id: 60BE:1DB12B:55F0C:686EE:688B24DC
x-origin-cache: HIT
x-proxy-cache: MISS
x-robots-tag: index
x-served-by: cache-bom-vanm7210066-BOM
x-timer: S1753949405.489283,VS0,VE217
x-vercel-cache: MISS
x-vercel-id: bom1::qslpg-1753949405466-8210973a3f1b
content-length: 8197
Slider events in JavaScript
Slider Events in JavaScript
Use Plotly to create custom sliders in D3.js-based JavaScript charts.
Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.
Plotly.newPlot('myDiv', [{
x: [1, 2, 3],
y: [2, 1, 3]
}], {
sliders: [{
pad: {t: 30},
currentvalue: {
xanchor: 'right',
prefix: 'color: ',
font: {
color: '#888',
size: 20
}
},
steps: [{
label: 'red',
method: 'restyle',
args: ['line.color', 'red']
}, {
label: 'green',
method: 'restyle',
args: ['line.color', 'green']
}, {
label: 'blue',
method: 'restyle',
args: ['line.color', 'blue']
}]
}]
});
Plotly.newPlot('myDiv', [{
x: [1, 2, 3],
y: [2, 1, 3]
}], {
sliders: [{
pad: {t: 30},
len: 0.5,
x: 0.5,
currentvalue: {
xanchor: 'right',
prefix: 'color: ',
font: {
color: '#888',
size: 20
}
},
// If all of a component's commands affect a single attribute, the component
// will be bound to the plot and will automatically update to reflect changes.
steps: [{
label: 'red',
method: 'restyle',
args: ['line.color', 'red']
}, {
label: 'green',
method: 'restyle',
args: ['line.color', 'green']
}, {
label: 'blue',
method: 'restyle',
args: ['line.color', 'blue']
}]
}],
updatemenus: [{
pad: {t: 60, r: 30},
type: 'buttons',
xanchor: 'left',
yanchor: 'top',
x: 00,
y: 0,
direction: 'right',
buttons: [{
label: 'red',
method: 'restyle',
args: ['line.color', 'red']
}, {
label: 'green',
method: 'restyle',
args: ['line.color', 'green']
}, {
label: 'blue',
method: 'restyle',
args: ['line.color', 'blue']
}]
}]
});
Plotly.newPlot('myDiv', {
data: [{
x: [1, 2, 3],
y: [2, 1, 3],
line: {
color: 'red',
simplify: false,
}
}],
layout: {
sliders: [{
pad: {t: 30},
x: 0.05,
len: 0.95,
currentvalue: {
xanchor: 'right',
prefix: 'color: ',
font: {
color: '#888',
size: 20
}
},
transition: {duration: 500},
// By default, animate commands are bound to the most recently animated frame:
steps: [{
label: 'red',
method: 'animate',
args: [['red'], {
mode: 'immediate',
frame: {redraw: false, duration: 500},
transition: {duration: 500}
}]
}, {
label: 'green',
method: 'animate',
args: [['green'], {
mode: 'immediate',
frame: {redraw: false, duration: 500},
transition: {duration: 500}
}]
}, {
label: 'blue',
method: 'animate',
args: [['blue'], {
mode: 'immediate',
frame: {redraw: false, duration: 500},
transition: {duration: 500}
}]
}]
}],
updatemenus: [{
type: 'buttons',
showactive: false,
x: 0.05,
y: 0,
xanchor: 'right',
yanchor: 'top',
pad: {t: 60, r: 20},
buttons: [{
label: 'Play',
method: 'animate',
args: [null, {
fromcurrent: true,
frame: {redraw: false, duration: 1000},
transition: {duration: 500}
}]
}]
}]
},
// The slider itself does not contain any notion of timing, so animating a slider
// must be accomplished through a sequence of frames. Here we'll change the color
// and the data of a single trace:
frames: [{
name: 'red',
data: [{
y: [2, 1, 3],
'line.color': 'red'
}]
}, {
name: 'green',
data: [{
y: [3, 2, 1],
'line.color': 'green'}]
}, {
name: 'blue',
data: [{
y: [1, 3, 2],
'line.color': 'blue'}]
}]
});