<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
});
}
});
This Pen doesn't use any external CSS resources.