Hi,
I have two possible ways of doing this, using input or using highstock.
You can anchor the value from the input in the method setExtremes to set the min and max extremes on the x-axis and change them dynamically.
Code: Select all
<input id="rangeSelector" type="range" value="100" min="0" max="100">
Code: Select all
rangeSelector.addEventListener('change', () => {
chart.xAxis[0].setExtremes(0, rangeSelector.value);
});
https://api.highcharts.com/class-refere ... etExtremes
Demo with input: https://jsfiddle.net/BlackLabel/79hpg56b/3/
Have you considered using a range selector like the one built into the stock chart?
You can customize it a bit and change the look, maybe not exactly as your slider but there are quite a few options.
Demo in Stock: https://jsfiddle.net/BlackLabel/79hpg56b/4/
Let me know what you think about these solutions.
Best regards.