add delay on onChange event in ionRangeSlider

2.2k Views Asked by At

I am using a ionRangeSlider for price range:

HTML

<input class="range-slider" id="price_range">

JS

        $("#price_range").ionRangeSlider({
            min: 0,
            max: 10000,
            type: "double",
            grid: false,
            step: 500,
            force_edges: true,
            decorate_both: false,
            prettify_enabled: true,
            onChange: function (data) {
                $('#loading').show();
                window.location.replace("@Url");
            },
        });

I want to add a delay of 2 seconds on onChange before redirecting to the url.

I have looked into the documentation but I can't find how to add a delay to the onChange event.

Any help would be appreciated

1

There are 1 best solutions below

3
On

Maybe you can try something like this -

<body>
    <select id="select">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <script>
        var wto;
        $('#select').change(function() {
          wto = setTimeout(function() {
            // write your code here
            console.log('something changed');
          }, 2000);
        });
    </script>
</body>

This change gets triggered whenever a new value is selected from the drop-down, but the alert will come after 2 seconds only.

Try this and let me know if you're looking for something else.