JSFiddle - React, Tailwind, and code Playground

by schme16

HTML

<link rel="stylesheet" href="https://gitcdn.link/repo/schme16/Chart.js-RangeSlider/master/dist/RangeSlider-all.min.css">
<script src="https://gitcdn.link/repo/schme16/Chart.js-RangeSlider/master/dist/RangeSlider-all.min.js"></script>
<!-- line chart canvas element -->
	<canvas id="ini" width="500" height="300"></canvas>

JavaScript

//this is just for debug
			randomTo = function (from, to) {
				return Math.floor(Math.random() * (to - from + 1) + from);
			};





		// line chart data
		var iniData = {
			labels:[
				"2000",
				"2001",
				"2002",
				"2003",
				"2004",
				"2005",
				"2006",
				"2007",
				"2008",
				"2009",
				"2011",
				"2012",
				"2013",
				"2014",
				"2015",
				"2016",
				"2017",
				"2018",
				"2019",
				"2020"
			],
			datasets:[{
				label: "Rangeslider Line 1",
				fillColor:"rgba(172,194,132,0)",
				strokeColor:"#C45662",
				pointColor:"#C45662",
				pointStrokeColor:"#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "#C45662",
				/*You only put numeric data here*/
				data:[
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
				]
			},
			{
				label: "Rangeslider Line 2",
				fillColor:"rgba(172,194,132,0)",
				strokeColor:"#C45662",
				pointColor:"#C45662",
				pointStrokeColor:"#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "#C45662",
				/*You only put numeric data here*/
				data:[
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480, 600),
					randomTo(480,...