JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>japsite</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<style>
.slider {
  -webkit-appearance: none;
  width: 85%;
  height: 10px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

</style>
   <body>
			<div class="slidecontainer">
				<span id="demo"></span>
                  <input type="range" min="0" max="99" value="" class="slider" id="myRange" style="float:right;">
				  
            </div>
			<div id="chartContainer" style="height: 300px; max-width: 920px; margin: 0px auto;"></div>

	</body>
	
	<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
	<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
	<script src="main.js"></script>
	<!--<script src="jquery-3.3.1.min.js"></script>
	
	<!--	<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>-->

</html>

JavaScript

$(function(){
  var chart = new CanvasJS.Chart("chartContainer", {
    title:{
      text: "Sample Chart"
    },
    backgroundColor: "blue",
    axisX:{
      labelFontColor: "white",
      crosshair: {
        enabled: true,
        snapToDataPoint: true
      },
      stripLines:[
        {                
          value: age,
        }    
      ] 			  
    },
    axisY:{
      labelFontColor: "white",
      interval: 5000000
    },
    data: [{
      type: "line",
      name: "First",
      fontColor: "white",
      showInLegend: true,
      dataPoints: [
        {x: 25, y: -932919},
        {x: 26, y: -1198982},
        {x: 27, y: -1465045},
        {x: 28, y: -2291108},
        {x: 29, y: -2559171},
        {x: 30, y: -2837234},
        {x: 31, y: -3117298},
        {x: 32, y: -3407361},
        {x: 33, y: -3699424},
        {x: 34, y: -4001487},
        {x: 35, y: -4325550},
        {x: 36, y: -4639613},
        {x: 37, y: -4955676},
        {x: 38, y: -5741740},
        {x: 39, y: -6069803},
        {x: 40, y: -6407866},
        {x: 41, y: -6747929},
        {x: 42, y: -7097992},
        {x: 43, y: -7450055},
        {x: 44, y: -7812118},
        {x: 45, y: -8196182},
        {x: 46, y: -8570245},
        {x: 47, y: -8946308},
        {x: 48, y: -9792371},
        {x: 49, y: -10180434},
        {x: 50, y: -10578497},
        {x: 51, y: -10978560},
        {x: 52, y: -11388624},
        {x: 53, y: -11800687},
        {x: 54, y: -12222750},
        {x: 55, y: -12666813},
        {x: 56, y: -13100876},
        {x: 57, y: -13536939},
        {x: 58, y: -14543003},
        {x: 59, y: -14991066},
        {x: 60, y: -15176138},
        {x: 61, y: -14544238},
        {x: 62, y: -13922338},
        {x: 63, y: -13302438},
        {x: 64, y: -12692538},
        {x: 65, y: -12104638},
        {x: 66, y: -11506738},
        {x: 67, y: -10910838},
        {x: 68, y: -10784938},
        {x: 69, y: -10201038},
        {x: 70, y: -9627138},
        {x: 71, y:...