ion.rangeSlider 更新方法触发 change 事件答案

【问题标题】：ion.rangeSlider update method triggering the change evention.rangeSlider 更新方法触发 change 事件
【发布时间】：2019-08-19 20:54:27
【问题描述】：

我在我的应用程序中使用了 ion.rangeSlider 插件，但是每当我更新滑块 'from' 值时，都会触发 'change' 事件。如何将更改事件替换为“完成”事件，以便仅在用户释放句柄时触发。这是sn-ps

const my_dates = [1560456085813, 1560517726557, 1560518176560, 1561605126457];

$('#updateBtn').on('click', function() {
      updateSlider();
});


$('#seekSlider').ionRangeSlider({
        skin: "big",
        type: "single",
        grid: false,
        min: my_dates[0],
        max: my_dates[3],
        from: 0,
        values: my_dates,
        prettify: convertMillesecondsToDate
        
});
$('#seekSlider').on("change", function () {


        console.log('onChange event fired');

});


function updateSlider(){


     $('#seekSlider').data("ionRangeSlider").update({
     
          from: 2,
     
     });

}

function convertMillesecondsToDate(time_in_milleseconds)
{
        const d = new Date(time_in_milleseconds);

        let dateString = d.toLocaleString('fr-FR'); // 13/06/2019 à 18:27:50
        return dateString;

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/css/ion.rangeSlider.min.css"/>

 
<input id="seekSlider" type="text" value="" />
<button id="updateBtn">Update the Slider</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>

【问题讨论】：

标签： javascript jquery-ui-slider

【解决方案1】：

您可以使用回调来做到这一点。

有 4 个回调。 onStart、onChange、onFinish 和 onUpdate。每个回调将接收具有当前范围滑块状态的数据对象。

你想要的是onFinish 回调

$(".js-range-slider").ionRangeSlider({
    onFinish: function (data) {
        // Called then action is done and mouse is released
        console.log(data.to);
    },
});

欲了解更多信息，请访问：ion.rangeSlider

【讨论】：