JQUERY Move the slider to modify the chart

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
  <script nonce="undefined" src="//cdn.zingchart.com/zingchart.jquery.min.js "></script>

  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    body {
      font-family: Helvetica;
      padding: 20px;
    }

    h3 {
      text-align: center;
    }

    #myChart {
      width: 100%;
      height: 300px;
    }

    #myTable {
      text-align: left;
      width: 88%;
      margin-left: 10%;
      margin-top: 20px;
    }

    #docs {
      display: block;
      margin-top: 20px;
      background-color: #00BAF0;
      color: #FFF;
      padding: 10px 20px;
      text-decoration: none;
      text-align: center;
    }

    input {
      -webkit-appearance: slider-vertical;
      width: 50%;
      height: 50%;
    }
  </style>
</head>

<body>
  <h3>Move the sliders to modify the chart</h3>
  <div id="myChart"></div>
  <table id="myTable">
    <tr>
      <th>Node 0</th>
      <th>Node 1</th>
      <th>Node 2</th>
      <th>Node 3</th>
      <th>Node 4</th>
      <th>Node 5</th>
    </tr>
    <tr id="sliders">
      <td><input type="range" name="points" min="0" max="10" value="3" orient='vertical'></td>
      <td><input type="range" name="points" min="0" max="10" value="4" orient='vertical'></td>
      <td><input type="range" name="points" min="0" max="10" value="10" orient='vertical'></td>
      <td><input type="range" name="points" min="0" max="10" value="2" orient='vertical'></td>
      <td><input type="range" name="points" min="0" max="10" value="6" orient='vertical'></td>
      <td><input type="range" name="points" min="0" max="10" value="5" orient='vertical'></td>
    </tr>
  </table>
  <a id="docs" target="_blank" href='https://github.com/zingchart/ZingChart-jQuery'>Check out our documentation on GitHub!</a>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // Data for the chart
    var myData = {
      type: "line",
      plot: {
        aspect: "spline"
      },
      series: [{
        values: [3, 4, 10, 2, 6, 5]
      }]
    };

    // Make your chart
    $("#myChart").zingchart({
      data: myData
    });

    $("input[type='range']").each(function(idx) {

      // Bind input events to each slider
      $(this).on("input", function() {
        // Get the value of each slider on input events
        var newVal = parseInt($(this).val());
        // Set the value of the corresponding node to the slider's new value
        $("#myChart").setNodeValue({
          plotindex: 0,
          nodeindex: idx,
          value: newVal
        })
      });
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
  <script src="//cdn.zingchart.com/zingchart.jquery.min.js "></script>

  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <h3>Move the sliders to modify the chart</h3>
  <div id="myChart"></div>
  <table id="myTable">
    <tr>
      <th>Node 0</th>
      <th>Node 1</th>
      <th>Node 2</th>
      <th>Node 3</th>
      <th>Node 4</th>
      <th>Node 5</th>
    </tr>
    <tr id="sliders">
      <td><input type="range" name="points" min="0" max="10" value="3" orient='vertical'></td>
      <td><input type="range" name="points" min="0" max="10" value="4" orient='vertical'></td>
      <td><input type="range" name="points" min="0" max="10" value="10" orient='vertical'></td>
      <td><input type="range" name="points" min="0" max="10" value="2" orient='vertical'></td>
      <td><input type="range" name="points" min="0" max="10" value="6" orient='vertical'></td>
      <td><input type="range" name="points" min="0" max="10" value="5" orient='vertical'></td>
    </tr>
  </table>
  <a id="docs" target="_blank" href='https://github.com/zingchart/ZingChart-jQuery'>Check out our documentation on GitHub!</a>
</body>

</html>

body {
  font-family: Helvetica;
  padding: 20px;
}

h3 {
  text-align: center;
}

#myChart {
  width: 100%;
  height: 300px;
}

#myTable {
  text-align: left;
  width: 88%;
  margin-left: 10%;
  margin-top: 20px;
}

#docs {
  display: block;
  margin-top: 20px;
  background-color: #00BAF0;
  color: #FFF;
  padding: 10px 20px;
  text-decoration: none;
  text-align: center;
}

input {
  -webkit-appearance: slider-vertical;
  width: 50%;
  height: 50%;
}

// Data for the chart
var myData = {
  type: "line",
  plot: {
    aspect: "spline"
  },
  series: [{
    values: [3, 4, 10, 2, 6, 5]
  }]
};

// Make your chart
$("#myChart").zingchart({
  data: myData
});

$("input[type='range']").each(function(idx) {

  // Bind input events to each slider
  $(this).on("input", function() {
    // Get the value of each slider on input events
    var newVal = parseInt($(this).val());
    // Set the value of the corresponding node to the slider's new value
    $("#myChart").setNodeValue({
      plotindex: 0,
      nodeindex: idx,
      value: newVal
    })
  });
});