Hi rani,
Check this example. Now please take its reference and correct your code.
Controller
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult Index(string hfMin, string hfMax)
{
return View();
}
}
View
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>View</title>
</head>
<body>
<form asp-action="Index" asp-controller="Home">
<div id="price_slider_value" style="width: 400px"></div>
<input type="hidden" name="hfMin" />
<input type="hidden" name="hfMax" />
<div id="price_slider"></div>
<input type="submit" value="Save" />
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript">
var min = 0;
var max = 100;
function SetSlider() {
//Display the minimum and maximum values.
$("#price_slider_value").html("Rs." + min + " - Rs." + max);
//Initialize the slider.
$("#price_slider").slider({
min: min,
max: max,
step: 5,
values: [min, max],
stop: function (event, ui) {
var start = parseInt(ui.values[0]);
var end = parseInt(ui.values[1]);
$("#Min").val(start);
$("#Max").val(end);
$("#price_slider_value").html("Rs." + start + " - Rs." + end);
},
slide: function (event, ui) {
if ((ui.values[0] + 5) >= ui.values[1]) {
return false;
}
}
});
}
$(function () {
SetSlider();
});
</script>
</body>
</html>
Screenshot
