CodePen Embed - slider-example

<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <div id="graph"><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

Plotly.plot('graph', [{
  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']
    }]
  }]
}, {showSendToCloud: true});

This Pen is owned by plotly on CodePen.

See more by @plotly on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.