I am using ion.rangeSlider plugin in my application, however whenever i update the slider 'from' value, the 'change' event is fired. How can replace the change event with 'finish' event so that it is only fired when the user releases the handle. Here is the snippets

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=".3.0/css/ion.rangeSlider.min.css"/>

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

<script src=".3.1/jquery.min.js"></script>
<script src=".3.0/js/ion.rangeSlider.min.js"></script>

I am using ion.rangeSlider plugin in my application, however whenever i update the slider 'from' value, the 'change' event is fired. How can replace the change event with 'finish' event so that it is only fired when the user releases the handle. Here is the snippets

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./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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/ion-rangeslider/2.3.0/js/ion.rangeSlider.min.js"></script>

• javascript
• jquery-ui-slider

1 Answer 1

You can do this by using callbacks.

There are 4 callbacks. onStart, onChange, onFinish, and onUpdate. Each callback will receive data object with the current range sliders state.

What you want is the onFinish callback

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

For more information visit: ion.rangeSlider