<div id="myChart">
  
  <input type="range" min="0" max="4" value="0" class="slider" id="mySlider"></input>
  <p>Value: <span id="output"></p>
    
</div>

body {
  font-family: Arial;
}

#myChart {
 height: 600px;
 width: 600px;
 margin: 0 auto; 
}

// Create sample data
var sampleData = [0, 1, 2, 3, 4];
// Create a chart
var myConfig = {
  type: "line",
  guide: {},
  series: [
    {
      values: sampleData
    }
  ]
};
// Render Your Chart
zingchart.render({
  id: "myChart",
  data: myConfig
});
// Grab range slider from the DOM
var slider = document.getElementById("mySlider");
// Grab the output span from the DOM
var output = document.getElementById("output");
// Assign the slider value to the output span's HTML value
output.innerHTML = slider.value;
// Add an event listener to our range slider
slider.addEventListener("input", function() {
  output.innerHTML = event.target.value;
  var guideValue = event.target.value;
  if (guideValue < 5) {
    zingchart.exec("myChart", "setguide", {
      graphid: 0,
      keyvalue: guideValue
    });
  }
});