JQuery-UI滑块自动增量但不会触发幻灯片事件

Question

Here is the live demo . What I am trying to achieve is that the user can either manually use the slider handle to change the values shown in the highcharts chart or they can click play and it will auto-increment the slider's value and make the change in the chart. So far I the manual slider action works as designed. However, when I have the auto slide fired it does increment the slider's value/position but it does not fire the the slider.slide function that makes the changes to the chart. Probably something really simple but I cannot find it.

Code for slider:

$(function () {
    $("#slider").slider({
        value: 0,
        range: "month",
        min: 0,
        max: data1.length - 1,
        animate: true,
        slide: function (event, ui) {
            chartIncrement(this, ui.value);
        }
    });
});

Code for the auto-increment:

function scrollSlider() {
    var slideValue;
    slideValue = $("#slider").slider("value");
    if (slideValue >= 0) {
        if (slideValue == data1.length - 1) {
            slideValue = -1;
        }
        $("#slider").slider("value", slideValue + 1);
        console.log($("#slider").slider("value"));
        setTimeout(scrollSlider, 1000);
    }
}

$('#startSlider').click(function () {
    scrollSlider();
});

And here is the code that affects the change in the chart:

function updateChart(chart, value) {
    chart.series[0].setData([data1[value]]);
}
function chartIncrement(identifier, value) {
    $("#slider-val").text(Highcharts.dateFormat('%b %Y', data1[value][0]));
    updateChart(chart, value);
}

How can I have the auto-increment method also fire the slide function? I thought if you changed the value regardless of method it would "do" work.

Answer 1

According to the docs, use the change callback and not the slide callback (bolding mine):

slide( event, ui )Type: slide

Triggered on every mouse move during slide. The value provided in the event as ui.value represents the value that the handle will have as a result of the current movement. Canceling the event will prevent the handle from moving and the handle will continue to have its previous value.

---

change( event, ui )Type: slidechange

Triggered after the user slides a handle, if the value has changed; or if the value is changed programmatically via the value method.

Updated fiddle .