JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="chartContainer" style="height: 360px; width: 100%; display: inline-block;"></div>

JavaScript

var sliderHandle = [];

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Line Chart with Sliding Stripline"
  },
  axisY: {
    stripLines: [
      {
        startValue: 10,
        endValue: 55,
        color: "#eb4559",
        opacity: .3
      },
      {
        startValue: 60,
        endValue: 85,
        color: "#827397",
        opacity: .3
      }
    ]
  },
  // add a secondary axis Y to position the DOM elements
  axisY2:{
    margin: 15,
    lineThickness: 0
  },
  data: [{		
  	type: "line",
    dataPoints: [
      { x: 10, y: 71 },
      { x: 20, y: 55},
      { x: 30, y: 50 },
      { x: 40, y: 65 },
      { x: 50, y: 95 },
      { x: 60, y: 68 },
      { x: 70, y: 28 },
      { x: 80, y: 34 },
      { x: 90, y: 14}
    ]
  }]
});

addSliderHandle(chart);

//function to add custom DOM element(slider handle)
function addSliderHandle(chart){
	var sliderHandleCounter = 0;
  
  chart.options.data.push(
    {		
      color: "transparent",
      axisYType: "secondary",
      dataPoints: []
    });
  chart.render();

  for(var i = 0; i < chart.axisY[0].stripLines.length; i++){

    sliderHandle.push( $("<div>")
                .attr("id", "strpsv" + i)
                .attr("stripline-index", i )
                .attr("stripline-bound-type", "startValue")
                .css({"background-color":"gray", "height": "8px", "width": "8px", "border-radius": "4px", "cursor": "pointer",})
                .attr("class", "handle")
                .appendTo($("#chartContainer>.canvasjs-chart-container"))
               );
    positionHandle(sliderHandle[sliderHandleCounter], chart.axisY[0].stripLines[i].startValue);
    sliderHandleCounter++;
    
    sliderHandle.push( $("<div>")
                .attr("id", "strpsv" + i)
                .attr("stripline-index", i )
                .attr("stripline-bound-type", "endValue")
                .css({"background-color":"gray", "height": "8px", "width": "8px", "border-radius": "4px", "cursor":...