Slider

A demo for using the API to make a chart that can be controller by a slider.

Chart

Code

<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>

Open in playground