JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="" >
  <head>
    <meta charset="UTF-8">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Chart.js</title>
  </head>
  <body>
    <div class="slidecontainer" id="sliders">
      <input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="slider_a">a : <span id="val_a">0</span><br/>
      <input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="slider_b">b : <span id="val_b">0</span><br />
      <input type="range" min="-1" max="1" value="0" step="0.1" class="slider" id="slider_c">c : <span id="val_c">0</span><br />
    </div>
    <div class="chart-container" style="position: relative; height:40vh; width:80vw">
      <canvas id="myChart"></canvas>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
    <script>
function calc_ys(xs,a,b,c) {
  return xs.map(x => a*x*x+b*x+c);
}

const ctx = document.getElementById("myChart").getContext('2d');
const xs = [];
for(let i=-20; i<21; i++) { xs.push(i*0.1); }
let myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: xs,
    datasets: [{
      label: 'ax^2 + bx + c',
      data: calc_ys(xs,0,0,0)
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min:-4, max:4
        }
      }]
    }
  }
});

var sliders = document.getElementById("sliders");
sliders.addEventListener("input", function() {
  let a = document.getElementById("slider_a").value;
  let b = document.getElementById("slider_b").value;
  let c = document.getElementById("slider_c").value;
  document.getElementById("val_a").textContent = a;
  document.getElementById("val_b").textContent = b;
  document.getElementById("val_c").textContent = c;
  myChart.data.datasets[0].data = calc_ys(xs,Number(a),Number(b),Number(c));
  myChart.update();
}, false);

    </script>
  </body>
</html>