jQuery UI slider - big ranges

I have a slider made with jQuery UI, which works completely fine, except that since the range is from 0 to 开发者_运维百科250,000, and since I have the event calling for a ajax request every time something changes, if I slide from one side to another slowly the result will be an huge amount of ajax requests, which is not good at all.

Been digging on jQuery UI documentation but didn't see any way to solve this problem. I would block the event temporarily from the time a user presses the slider and only trigger the event when the user stops interacting with it, but found nothing about this.

Rather than subscribing to the slider's slide event, why not subscribe to its slidechange or stopslide events?

$( ".selector" ).slider({
   change: function(event, ui) { ... }  // Called after slidestop or if changed programmatically
   stop: function(event, ui) { ... }    // Called when user stops sliding
});

One possibility would be to create a timer and give it a timeout period in milliseconds, say 500, which is half a second. Have the timer reset back to the timeout period every time the slide event fires.

If the timer manages to fully count down, you can assume the user has stopped moving the slider and trigger your Ajax call.

This is the approach that JQuery plugins like TypeWatch use to only send an Ajax request when a user stops typing in a text box.

    we can define steps in it also like,

    $("#slider-range-max").slider({
            range : "max",
            min : 0,
            max : 200,
            step : 0.1,   //steps
            value : 200,
            slide : function(event, ui) {
                $("#amount").val(ui.value);
            }
        });

Even we can handle it by writing value in textbox like this,

on value change of textbox call this function by passing parameter this.value

function setSlider(value) {
    $("#slider-range-max").slider({
        range : "max",
        min : 0,
        max : 200,
        step : 0.1,
        value : value,  // value will be setted slider position as par value
        slide : function(event, ui) {
            $("#amount").val(ui.value);
        }
    });
    $("#amount").val($("#slider-range-max").slider("value"));
}