docs(website): add slider demo

demo/slider.html

@@ -61,10 +61,9 @@
   <script src="scripts/racing-bars.umd.js"></script>
   <script>
     let options = {
-      title: 'A Tale of 11 Years',
-      subTitle: 'Top 10 Surgical Procedures',
+      title: 'World Population',
+      subTitle: 'in millions',
       dateCounterFormat: 'MM/YYYY',
-      caption: 'Aswan Heart Centre',
       autorun: false,
     };
 
@@ -77,12 +76,12 @@
       slider.oninput = function () {
         racer.setDate(dates[slider.value]);
       };
-      document.addEventListener('racingBars/dateChange', (e) => {
+      document.addEventListener('dateChange', (e) => {
         slider.value = dates.indexOf(e.detail.date);
       });
     });
 
-    document.addEventListener('racingBars/dateChange', (e) => {
+    document.addEventListener('dateChange', (e) => {
       console.log(e.target);
       console.log(e.detail.date);
       console.log(e.detail.isFirst);

website/docs/documentation/api.md

@@ -229,7 +229,7 @@ setTimeout(() => {
 ```
 
 See the guide on [Chart Controls](../guides/chart-controls.md) for other alternatives of controlling charts.
-See the guides on [Slider](../guides/slider.md) and [Scroller](../guides/scroller.md) for usage examples.
+See the examples for [Slider](../gallery/slider.md) and [Scroller](../gallery/scroller.md) for usage examples.
 
 ## Interfaces
 

website/docs/documentation/events.md

@@ -7,7 +7,7 @@ title: Events
 When the chart loads and with each frame change (date change), a custom DOM event is fired.
 
 Listening to these events allows getting the current state of the chart and can be used with [chart controls](../guides/chart-controls.md) to interact with the chart.
-See the guide on creating a [slider](../guides/slider.md) for usage examples.
+See the example for creating a [slider](../gallery/slider.md).
 
 - Event type:
   - `"dateChange"`: fires when the date changes.

website/docs/guides/scroller.md → website/docs/gallery/scroller.md

@@ -1,5 +1,6 @@
 ---
 title: Scroller
+hide_table_of_contents: true
 ---
 
 TODO...

website/docs/gallery/slider.md

@@ -0,0 +1,75 @@
+---
+title: Slider
+hide_table_of_contents: true
+---
+
+import RacingBars from '../../src/components/RacingBars';
+import styles from './slider.module.css';
+
+A demo for using the [API](../documentation/api.md#race) to make a chart that can be controller by a slider.
+
+<!--truncate-->
+
+### Chart
+
+export let chartObj;
+
+export const callback = (racer, data) => {
+chartObj = racer;
+const container = document.querySelector('#slider-container');
+container.style.visibility = 'visible';
+const slider = document.getElementById('slider');
+const dates = racer.getAllDates();
+slider.max = dates.length - 1;
+slider.addEventListener('input', () => {
+racer.setDate(dates[slider.value]);
+});
+document.addEventListener('dateChange', (e) => {
+slider.value = dates.indexOf(e.detail.date);
+});
+};
+
+<div>
+  <RacingBars
+    dataUrl="/data/population.csv"
+    dataType="csv"
+    title="Chart Slider Demo"
+    callback={callback}
+    showCode={false}
+    height='window*0.7'
+  />
+</div>
+
+<div id="slider-container" class={styles.slider_container} style={{visibility: 'hidden'}}>
+  <input type="range" min="0" max="100" value="0" id="slider" class={styles.slider} />
+</div>
+
+### Code
+
+```html
+<div id="race"></div>
+<input type="range" min="0" max="100" value="0" id="slider" />
+
+<script type="module">
+  import { race } from 'https://cdn.jsdelivr.net/npm/racing-bars';
+
+  const options = {
+    title: 'Chart Slider Demo',
+  };
+
+  const racer = await race('/data/population.json', '#race', options);
+
+  const slider = document.getElementById('slider');
+  const dates = racer.getAllDates();
+
+  slider.max = dates.length - 1;
+  slider.addEventListener('input', () => {
+    racer.setDate(dates[slider.value]);
+  });
+  document.addEventListener('dateChange', (e) => {
+    slider.value = dates.indexOf(e.detail.date);
+  });
+</script>
+```
+
+<a href="https://livecodes.io/?x=id/yn3ptgz7j4r" target="_blank" class="external">Open in playground</a>

website/docs/gallery/slider.module.css

@@ -0,0 +1,28 @@
+.slider_container {
+  width: 90%;
+  margin: 20px auto;
+}
+.slider {
+  -webkit-appearance: none;
+  width: 100%;
+  height: 15px;
+  border-radius: 5px;
+  background: #dedddd;
+  outline: none;
+}
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background: var(--ifm-color-primary-light);
+  cursor: pointer;
+}
+.slider::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background: var(--ifm-color-primary-light);
+  cursor: pointer;
+}

website/docs/index.md

@@ -5,8 +5,8 @@ hide_table_of_contents: true
 
 <head>
   <title>RacingBars</title>
-  <meta property="og:title" content="RacingBars">
-  <meta name="twitter:title" content="RacingBars">
+  <meta property="og:title" content="RacingBars" />
+  <meta name="twitter:title" content="RacingBars" />
 </head>
 
 ### **Bar Chart Race Made Easy 🎉**

website/sidebars.ts

@@ -71,8 +71,6 @@ const sidebars: SidebarsConfig = {
         'guides/changing-options',
         'guides/fill-date-gaps',
         'guides/multiple-charts',
-        'guides/slider',
-        'guides/scroller',
       ],
     },
     {

website/src/css/custom.css

@@ -29,7 +29,7 @@
 }
 
 .gallery .racing-bars {
-  min-height: 400px;
+  min-height: 300px;
   width: 100%;
   height: 80vh;
 }