how to zoom to a specific date range in jscharting?

I am trying to implement zoom functionality in candlestick chart. I am currently using jscharting library from https://jscharting.com.

I have successfully able to show candlestick chart but when I am trying to implement zoom functionality I am facing issues.
Here is the how I tried to implement it.

                  function applyZoom(range) {
            range[0] = parseInt(range[0].toFixed(0));
            range[1] = parseInt(range[1].toFixed(0));
            var data = chart.series('my chart').points().items;
            var from = data[range[0]].x, to = data[range[1]].x;
            data[range[0]].zoomTo();
            chart.axes('x').zoom(from);
        };
   
           var options = {
                type: 'candlestick',
                debug: true,
                title_label_text: 'my chart',
                palette: 'fiveColor18',
                legend: {
                    template: '%icon %name',
                    position: 'inside top left'
                },
                axisToZoom: 'x',
                xAxis: {
                    crosshair: { enabled: true },
                    scale: {
                        type: 'time',
                        defaultBreak: { type: 'hidden' },
                        breaks: [
                            {
                                weekday: [0, 6],
                                offset: {
                                    unit: 'day',
                                    multiplier: -0.5
                                }
                            }
                        ]
                    }
                },
                yAxis: [
                    {
                        id: 'yMain',
                        crosshair_enabled: true,
                        orientation: 'opposite',
                        scale: { range_padding: 0.1 },
                        markers: []//
                    },
                    {
                        id: 'yVol',
                        visible: false,
                        scale: {
                            syncWith: 'none',
                            range: { padding: 1.5, min: 0 }
                        }
                    }
                ],
                defaultPoint_radius: 100,
                toolbar: {
                    items: {
                        label: {
                            type: 'label',
                            label_text:
                                '<chart scale width=500 min=' + 0 + ' max=' + (data.length - 1) + ' interval=25>',
                            boxVisible: false,
                            position: 'bottom',
                            itemsBox: {
                                visible: true,
                                boxVisible: false
                            },
                            items: {
                                slider: {
                                    type: 'range',
                                    width: 500,
                                    value: [0, data.length - 1],
                                    min: 0,
                                    max: data.length - 1,
                                    events_change: applyZoom
                                }
                            }
                        }
                    }
                },
                navigator: {
                    toolbarVisible: true,
                    xScrollbarEnabled: true,
                    previewAreaVisible: false
                },
                series: [
                    {
                        name: 'Volume',
                        type: 'column',
                        yAxis: 'yVol',
                        defaultPoint: { opacity: 0.85 },
                        points: [],
                        events_show: function () { alert('ok'); }
                    },
                    {
                        yAxis: 'yMain',
                        name: 'my chart',
                        points: []
                    }
                ],
            };
            options.series[0].points = volume;
            options.series[1].points = ohlc;
            $chartEl.JSC(options);
            chart = $chartEl.JSC();

What am I doing wrong here?