Add doc pages for the slider component

Author: rreusser

_posts/plotly_js/callbacks-slider-components/2016-11-03-bindings.html

@@ -0,0 +1,64 @@
+---
+name: Automatically bind components to the appearance of the plot
+plot_url: https://codepen.io/plotly/embed/ZBzZZO/?height=558&theme-id=15263&default-tab=result
+language: plotly_js
+suite: slider-components-events
+sitemap: false
+order: 2
+arrangement: horizontal
+---
+Plotly.plot('graph', [{
+  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']
+    }]
+  }]
+});

_posts/plotly_js/callbacks-slider-components/2016-11-03-play-button.html

@@ -0,0 +1,99 @@
+---
+name: Create a play button that controls a slider
+plot_url: https://codepen.io/plotly/embed/NbKmmQ/?height=558&theme-id=15263&default-tab=result
+language: plotly_js
+suite: slider-components-events
+sitemap: false
+order: 3
+arrangement: horizontal
+---
+Plotly.plot('graph', {
+  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'}]
+  }]
+});

_posts/plotly_js/callbacks-slider-components/2016-11-03-simple-slider.html

@@ -0,0 +1,38 @@
+---
+name: Create a slider to restyle the plot
+plot_url: https://codepen.io/plotly/embed/pNzBYJ/?height=558&theme-id=15263&default-tab=result
+language: plotly_js
+suite: slider-components-events
+sitemap: false
+order: 2
+arrangement: horizontal
+---
+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']
+    }]
+  }]
+});

_posts/plotly_js/callbacks-slider-components/2016-11-03-sliders_index.html

@@ -0,0 +1,15 @@
+---
+title: Sliders in D3.js-based JavaScript Charts | Examples | Plotly
+name: Slider Events
+permalink: javascript/sliders/
+description: Use Plotly to create custom sliders in D3.js-based JavaScript charts.
+layout: base
+thumbnail: thumbnail/slider-component.jpg
+language: plotly_js
+page_type: example_index
+has_thumbnail: true
+display_as: chart_events
+order: 1
+---
+{% assign examples = site.posts | where:"language","plotly_js" | where:"suite","slider-components-events" | sort: "order" %}
+{% include auto_examples.html examples=examples %}