JQuery ui Slider-ajax server side call

In this article, I will show you how to send a post with to the server from jQuery ui Slider using jQuery Ajax . The jQuery ui Slide allows the user to select certain numeric value range from it.  The Slide(event,ui) will be triggered on every mouse move on a slider. We must register three external links.

Asp.net mvc jQuery ajax mvc4 example:

JS Code:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<link href=https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css
rel="stylesheet">
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
        $(".slider").slider({
            range: "max",
            min: 0.2,
            max: 5,
           stop: function (event, ui) {
           var rangevalue=     $("#slider1").slider("value");
          $.ajax({
            url: '@Url.Action("AdjustRange", "Home", new { area = "" })',
            type: 'POST',
            data: {
                Rvalue: rangevalue,
            },
            success: function (data) {
            },
            error: function (data) { }
        });
            }
        });
});
</script>

Server Side: Controller

The jQuery Ajax request the controller action method, there we can do our operations and return json result.

   [HttpPost]
        public virtual ActionResult AdjustImage(short Rvalue)
        {
//Do operation here
           return Json(new { message = “success” }, JsonRequestBehavior.AllowGet);
         }

JQuery ui Slider functionalities:

max: maximum value of slider

min: minimum value of slider 

range: It may either “max” or “min”