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"
  },
  axisX: {
    stripLines: [
      {
        startValue: 1088620200000,
        endValue: 1104517800000,
        color: "#eb4559",
        opacity: .3
      },
      {
        startValue: 1162319400000,
        endValue: 1193855400000,
        color: "#827397",
        opacity: .3
      }
    ]
  },
  // add a secondary axis Y to position the DOM elements
  axisY2:{
    margin: 15,
    lineThickness: 0
  },
  data: [{		
    type: "line",
    xValueType: "dateTime",
    dataPoints: [                  
      { x: 1088620200000, y :71},
      { x: 1104517800000, y : 55 },
      { x: 1112293800000, y:  50 },
      { x: 1136053800000, y : 65 },
      { x: 1157049000000, y : 95 },
      { x: 1162319400000, y : 68 },
      { x: 1180636200000, y : 28 },
      { x: 1193855400000, y : 34 },
      { x: 1209580200000, y : 14 },
      { x: 1230748200000, y : 34 },
      { x: 1241116200000, y : 44 },
      { x: 1262284200000, y : 84 },
      { x: 1272652200000, y : 4  },
      { x: 1291141800000, y : 44 },
      { x: 1304188200000, y : 11 }
    ]
  }]
});

addSliderHandle(chart);

//function to add custom DOM element(slider handle)
function addSliderHandle(chart){
  var sliderHandleCounter = 0;

  chart.options.data.push(
    {		
      color: "transparent",
      dataPoints: []
    });
  chart.render();

  for(var i = 0; i < chart.axisX[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"))
                     );
  ...