<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Page2.aspx.cs" Inherits="Page2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$("#slider-range").slider({
range: true,
min: 0,
max: 500,
values: [75, 300],
slide: function (event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
$("#start1").val(ui.values[0]);
$("#start2").val(ui.values[1]);
},
change: function (event, ui) {
debugger;
alert('Slider Value Changed');
$.ajax({
method: 'post',
url: 'UserViewProd.aspx/range',
contentType: 'application/json; charset=utf-8',
data: "{'Price1':'" + ui.values[0] + "','Price2':'" + ui.values[1] + "'}",
success: function (data) {
},
error: function (err) {
alert(err);
}
});
}
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) +
" - $" + $("#slider-range").slider("values", 1));
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>
<label for="amount">Price range:</label>
Start: <input id="start1" type="text" />
<hr />
End: <input id="start2" type="text" />
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
</div>
</form>
</body>
</html>