CODEWITHSUNDEEP
jqueryajax
OrElse
OrElse

Reputation: 9989

How can i capture the slider changed value with JQuery?

My Html markup is

<div id="price-range">
    <div class="padding-range"><div id="slider-range"></div></div>
    <label for="amount">Price:</label>
    <input type="text" id="amount" />
    <a href="#" class="button color">Filter</a>
</div>

I would like to capture the value change event with JQuery and perform an AJAX post. How can i do that? The optimum solution would be accessing the value with a small delay.

I mean the Ajax post should be perfomed once, at the end, not on value changing

I have tried getting the value without success

$("#price-range").on("change", function () { console.log(this.value) });

UPDATE

The slider event successfully is raised with 

$("#slider-range").slider({
    range: true,
    min: 0,
    max: 500,
    values: [0, 500],
    slide: function (event, ui) {
        event = event;
        $("#amount").val("€" + ui.values[0] + " - €" + ui.values[1]);
    }
});

$("#amount").val("€" + $("#slider-range").slider("values", 0) + " - €" + $("#slider-range").slider("values", 1));

The problem now is how to add the debounce effect

Upvotes: 0

Views: 1280

Answers (2)

OrElse
OrElse

Reputation: 9989

Ok. This one does the trick.

$("#slider-range").slider({
        range: true,
        min: 0,
        max: 500,
        values: [0, 500],
        slide: function (event, ui) {
            event = event;
            $("#amount").val("€" + ui.values[0] + " - €" + ui.values[1]);
        },
        stop: function (event, ui) {
            debugger;
            var path = "PageName.aspx/Method";
            $.ajax({
                url: path, type: "POST", cache: "false",
                dataType: "json", contentType: "application/json; charset=utf-8",
                data: "{'str1':'Some Temp String'}"
            });
        }
    });

Upvotes: 0

Jesse Kernaghan
Jesse Kernaghan

Reputation: 4634

To achieve this, you need to debounce the function. A simple way to achieve this is the following:

var debounce;

$("#slider-range").slider({
    range: true,
    min: 0,
    max: 500,
    values: [0, 500],
    slide: function (event, ui) {

        clearTimeout(debounce);

        debounce = setTimeout(function(){

            event = event;
            $("#amount").val("€" + ui.values[0] + " - €" + ui.values[1]);

        }.bind(this), 500);
    }
});

This architecture ensures that the console.log will only fire if the input hasn't changed in ~500ms.

Edit

I originally had the debounce set to 150ms, but if you're going to be firing an AJAX call each time I'd suggest something longer.

Upvotes: 1

Related Questions