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”