Question

我在我的应用程序中使用ion.rangeSlider插件，但是每当我更新滑块“ from”值时，都会触发“ change”事件。如何用'finish'事件代替change事件，以便仅在用户释放手柄时才触发它。这是片段

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>

Answer 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

ion.rangeSlider更新方法触发更改事件

1 个答案: