Range Selector - Use Range Selection for Filtering

The RangeSelector component allows you to handle changes of the currently selected range. For this purpose, the callback function is specified in the onValueChanged property. This demo illustrates how to use the newly selected range for filtering data.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

@model IEnumerable<DevExtreme.MVC.Demos.Models.SelectedEmployee> @(Html.DevExtreme().RangeSelector() .ID("range-selector") .Margin(m => m.Top(20)) .DataSource(Model) .DataSourceField("BirthYear") .Scale(s => s .TickInterval(1) .MinorTickInterval(1) .Label(f => f.Format(Format.Decimal))) .Behavior(b => b.ValueChangeMode(SliderValueChangeMode.OnHandleMove)) .Title("Filter Employee List by Birth Year") .OnValueChanged("rangeSelector_valueChanged") ) <h2 class="grid-header">Selected Employees</h2> @(Html.DevExtreme().DataGrid() .ID("data-grid") .DataSource(Model) .ShowBorders(true) .ColumnAutoWidth(true) .Columns(c => { c.Add().DataField("FirstName"); c.Add().DataField("LastName"); c.Add().DataField("BirthYear"); c.Add().DataField("City"); c.Add().DataField("Title"); }) ) <script> var _employees = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(Model)); function rangeSelector_valueChanged(e) { var selectedEmployees = $.grep(_employees, function(employee) { return employee.BirthYear >= e.value[0] && employee.BirthYear <= e.value[1]; }); $("#data-grid").dxDataGrid({ dataSource: selectedEmployees }); } </script>

using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models.SampleData; using System.Linq; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class RangeSelectorController : Controller { public ActionResult UseRangeSelectionForFiltering() { return View(SampleData.SelectedEmployees); } } }

using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.MVC.Demos.Models { public class SelectedEmployee { public string LastName { get; set; } public string FirstName { get; set; } public int BirthYear { get; set; } public string City { get; set; } public string Title { get; set; } } }

using System; using System.Collections.Generic; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<SelectedEmployee> SelectedEmployees = new[] { new SelectedEmployee { LastName = "Davolio", FirstName = "Nancy", BirthYear = 1948, City = "Seattle", Title = "Sales Representative" }, new SelectedEmployee { LastName = "Fuller", FirstName = "Andrew", BirthYear = 1952, City = "Tacoma", Title = "Vice President, Sales" }, new SelectedEmployee { LastName = "Leverling", FirstName = "Janet", BirthYear = 1963, City = "Kirkland", Title = "Sales Representative" }, new SelectedEmployee { LastName = "Peacock", FirstName = "Margaret", BirthYear = 1937, City = "Redmond", Title = "Sales Representative" }, new SelectedEmployee { LastName = "Buchanan", FirstName = "Steven", BirthYear = 1955, City = "London", Title = "Sales Manager" }, new SelectedEmployee { LastName = "Suyama", FirstName = "Michael", BirthYear = 1963, City = "London", Title = "Sales Representative" }, new SelectedEmployee { LastName = "King", FirstName = "Robert", BirthYear = 1960, City = "London", Title = "Sales Representative" }, new SelectedEmployee { LastName = "Callahan", FirstName = "Laura", BirthYear = 1958, City = "Seattle", Title = "Inside Sales Coordinator" }, new SelectedEmployee { LastName = "Dodsworth", FirstName = "Anne", BirthYear = 1966, City = "London", Title = "Sales Representative" } }; } }

h2.grid-header { font-size: 20px; margin: 38px 0 10px; text-align: center; } #range-selector { height: 140px; }