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

Share Improve this question Follow asked Aug 19, 2019 at 20:54 KenzoKenzo 1,83788 gold badges3535 silver badges5555 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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