JSFiddle - React, Tailwind, and code Playground

by danieldhaya19

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(){
	
 $age = 25;

            if ( $age == 25 ) {
                
				var age = 25;
	
				$("input[type=range]").val(age);
				
				var maxage = age + 69;
				if(maxage >= 99)
				{
					
				}
				else{
					var diffage = 99 - maxage;
					var maxage= 99 - diffage;
				}
				$('#myRange').attr('min', age);
				$('#myRange').attr('max', maxage);
			
				var slider = document.getElementById("myRange");
                var output = document.getElementById("demo");
				var step = 0;
				output.innerHTML = age;

			 	if(age < 24) { 
				
				}
				else{
					
				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:...