Hi rani,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Namespaces
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult GetEmployees(int from, int to)
{
List<Employee> employees = new List<Employee>();
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "SELECT EmployeeID,FirstName,LastName,City,Country FROM Employees WHERE EmployeeID BETWEEN @From AND @To";
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
cmd.Parameters.AddWithValue("@From", from);
cmd.Parameters.AddWithValue("@To", to);
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
employees.Add(new Employee
{
Id = Convert.ToInt32(sdr["EmployeeID"]),
Name = sdr["FirstName"] + " " + sdr["LastName"],
City = sdr["City"].ToString(),
Country = sdr["Country"].ToString()
});
}
}
con.Close();
}
}
return Json(employees);
}
public class Employee
{
public int Id { get; set; }
public string Name { get; set; }
public string City { get; set; }
public string Country { get; set; }
}
}
View
<div ng-app="MyApp" ng-controller="MyController">
Min Value:<input type="number" ng-model="rangeSlider.minValue" />
<br />
Max Value:<input type="number" ng-model="rangeSlider.maxValue" />
<br />
<rzslider rz-slider-model="rangeSlider.minValue" rz-slider-high="rangeSlider.maxValue"
rz-slider-options="rangeSlider.options"></rzslider>
<button type="button" ng-click="Search()">
Search</button>
<hr />
<table>
<tr>
<th>Id</th>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
<tr ng-repeat="employee in Employees">
<td>{{employee.Id}}</td>
<td>{{employee.Name}}</td>
<td>{{employee.City}}</td>
<td>{{employee.Country}}</td>
</tr>
</table>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
<link rel="stylesheet" href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css" />
<script type="text/javascript" src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', ['rzSlider'])
app.controller('MyController', function ($scope, $http, $window) {
$scope.rangeSlider = {
minValue: 1,
maxValue: 9,
options: {
floor: 1,
ceil: 9,
step: 1,
noSwitching: true
}
};
$scope.Search = function (date) {
$http({
method: 'POST',
url: 'Home/GetEmployees',
params: { from: $scope.rangeSlider.minValue, to: $scope.rangeSlider.maxValue }
}).then(function (response) {
$scope.Employees = response.data;
});
}
});
</script>
</div>
Screenshot