JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.stock.min.js"></script>

<div id="chartContainer" style="height: 450px; width: 100%;"></div>

JavaScript

window.onload = function() {
  var limit = 10000; //increase number of dataPoints by increasing this
  var y = 1000;
  var data = [];
  var dataSeries = {
    type: "spline"
  };
  var dataPoints = [];
  for (var i = 0; i < limit; i += 1) {
    y += Math.round((Math.random() * 10 - 5));
    dataPoints.push({
      x: i,
      y: y
    });
  }
  dataSeries.dataPoints = dataPoints;
  data.push(dataSeries);
  
  var min, max;
  var flag = false;
  var animationTimer;
  var animationSpeed = 5;

  var stockChart = new CanvasJS.StockChart("chartContainer", {
    title: {
      text: "Animate Slider on Click"
    },
    animationEnabled: true,
    exportEnabled: true,
    rangeChanged: function(e) {
      clearInterval(animationTimer);
      if (flag === false && e.source === "navigator") {
        if (min < e.minimum) {
          animateSlider("right", e);
          animationTimer = setInterval(animateSlider, 50, "right", e);
        }

        if (max > e.maximum) {
          animateSlider("left", e);
          animationTimer = setInterval(animateSlider, 50, "left", e);
        }
      } else {
        min = e.stockChart.navigator.slider.get("minimum");
        max = e.stockChart.navigator.slider.get("maximum");
      }
    },
    charts: [{
      axisX: {
        crosshair: {
          enabled: true,
          snapToDataPoint: true
        }
      },
      axisY: {
        crosshair: {
          enabled: true,
          //snapToDataPoint: true
        }
      },
      data: data
    }],
    rangeSelector: {
      inputFields: {
        startValue: 4000,
        endValue: 6000,
        valueFormatString: "###0"
      },
    }
  });

  stockChart.render();
  min = stockChart.navigator.slider.minimum;
  max = stockChart.navigator.slider.maximum;

  jQuery(".canvasjs-slider-panel").on("mousemove", function(e) {
    flag = true;
  });

  jQuery(".canvasjs-chart-panel").on("mousedown", function(e) {
    flag = false;
  });

  function animateSlider(direction, e) {
    var...