blazor-devexpress-dot-blazor-cfc7432b.md
An interactive component that visualizes data on a linear scale and allows users to select a value range.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
public class DxRangeSelector :
ClientComponentJSInterop,
IModelProvider<RangeSelectorChartModel>,
IModelProvider<TitleSettingsModel>,
IModelProvider<RangeSelectorBackgroundModel>,
IModelProvider<RangeSelectorIndentModel>,
IModelProvider<RangeSelectorShutterModel>,
IModelProvider<RangeSelectorScaleModel>,
IModelProvider<RangeSelectorSliderHandleModel>,
IModelProvider<RangeSelectorSliderMarkerModel>
The DevExpress Range Selector for Blazor (<DxRangeSelector>) visualizes data on a linear scale. Users can change selection by dragging sliders or moving the entire selected range.
Run Demo: Overview Run Demo: Filtering Run Demo: Discrete Scale
Show the Range Selector Structure
DxRangeSelector
.razor file: <DxRangeSelector>…</DxRangeSelector>.Refer to the following list for the component API reference: DxRangeSelector Members.
Blazor Range Selector supports static render mode to display static data in a single page. For other features, you need to enable interactivity on a Razor page and allow the component to execute scripts and display data.
Use the Data property to bind the Range Selector to data. Follow the steps below to display data within the component:
Data parameter to a C# field or property.<DxRangeSelector Data="@Data">
<DxTitleSettings Text="Population by Country, 2023" />
<DxRangeSelectorChart>
<DxChartBarSeries ArgumentField="@((PopulationPoint s) => s.Country)"
ValueField="@((PopulationPoint s) => s.Value)" />
</DxRangeSelectorChart>
</DxRangeSelector>
@code {
List<PopulationPoint> Data;
protected override void OnInitialized() {
Data = GetData();
}
}
public List<PopulationPoint> GetData() {
var result = new List<PopulationPoint>(14);
result.Add(new PopulationPoint("India", 1428627663));
result.Add(new PopulationPoint("China", 1425671352));
result.Add(new PopulationPoint("United States", 339996563));
result.Add(new PopulationPoint("Indonesia", 277534122));
result.Add(new PopulationPoint("Pakistan", 240485658));
result.Add(new PopulationPoint("Nigeria", 223804632));
result.Add(new PopulationPoint("Brazil", 216422446));
result.Add(new PopulationPoint("Bangladesh", 172954319));
result.Add(new PopulationPoint("Russia", 144444359));
result.Add(new PopulationPoint("Mexico", 128455567));
result.Add(new PopulationPoint("Ethiopia", 126527060));
result.Add(new PopulationPoint("Japan", 123294513));
result.Add(new PopulationPoint("Philippines", 117337368));
result.Add(new PopulationPoint("Egypt", 112716598));
return result;
}
public class PopulationPoint {
public string Country { get; set; }
public long Value { get; set; }
public PopulationPoint(string country, long value) {
Country = country;
Value = value;
}
}
You can handle the Rendered event to run custom code when component rendering is finished and the Range Selector is loaded.
The Range Selector displays two sliders that determine the selected range. Sliders consist of handles and markers that display selected values.
Users can change selected range in the following manner:
You can also use the following options to configure the component’s behavior on range selection:
AllowSliderSwapSpecifies whether users can swap sliders.SnapSliderToTicksSpecifies whether to dock the dropped slider to the nearest tick.
The Range Selector allows you to select a range in code. To set a range, use one of the following options:
When you leave the range unset, it matches the entire scale at the first component render.
The following code snippets specify a predefined range on the first render. Switch code tabs to see possible options.
<DxRangeSelector Width="1100px"
Height="200px"
SelectedRangeStartValue="@(new DateTime(2024, 2, 1))"
SelectedRangeEndValue="@(new DateTime(2024, 2, 14))">
<DxRangeSelectorScale StartValue="@(new DateTime(2024, 1, 1))"
EndValue="@(new DateTime(2024, 6, 1))"
TickInterval="ChartAxisInterval.Week"
MinorTickInterval="ChartAxisInterval.Day"
MinRange="ChartAxisInterval.Week"
MaxRange="ChartAxisInterval.Month"
ValueType="ChartAxisDataType.DateTime">
<DxRangeSelectorScaleMarker>
<DxRangeSelectorScaleMarkerLabel>
<DxTextFormatSettings Type="TextFormat.MonthAndYear" />
</DxRangeSelectorScaleMarkerLabel>
</DxRangeSelectorScaleMarker>
</DxRangeSelectorScale>
<DxRangeSelectorSliderMarker>
<DxTextFormatSettings Type="TextFormat.MonthAndDay" />
</DxRangeSelectorSliderMarker>
</DxRangeSelector>
<DxRangeSelector Width="1100px"
Height="200px"
SelectedRangeStartValue="@(new DateTime(2024, 2, 1))"
SelectedRangeLength="ChartAxisInterval.Weeks(2)">
<DxRangeSelectorScale StartValue="@(new DateTime(2024, 1, 1))"
EndValue="@(new DateTime(2024, 6, 1))"
TickInterval="ChartAxisInterval.Week"
MinorTickInterval="ChartAxisInterval.Day"
MinRange="ChartAxisInterval.Week"
MaxRange="ChartAxisInterval.Month"
ValueType="ChartAxisDataType.DateTime">
<DxRangeSelectorScaleMarker>
<DxRangeSelectorScaleMarkerLabel>
<DxTextFormatSettings Type="TextFormat.MonthAndYear" />
</DxRangeSelectorScaleMarkerLabel>
</DxRangeSelectorScaleMarker>
</DxRangeSelectorScale>
<DxRangeSelectorSliderMarker>
<DxTextFormatSettings Type="TextFormat.MonthAndDay" />
</DxRangeSelectorSliderMarker>
</DxRangeSelector>
Use DxRangeSelectorScale.MinRange and DxRangeSelectorScale.MaxRange properties to specify the minimum and maximum range that users can select on the scale. When a user tries to select an invalid range, the component behaves as follows:
Note that MinRange and MaxRange properties do not apply to discrete scales. The component also ignores these properties on the first render if you define a range in code.
The following code snippet sets the minimum range to a week and the maximum range to a month:
<DxRangeSelector Width="1100px"
Height="200px"
SelectedRangeStartValue="@(new DateTime(2024, 2, 1))"
SelectedRangeEndValue="@(new DateTime(2024, 2, 14))">
<DxRangeSelectorScale StartValue="@(new DateTime(2024, 1, 1))"
EndValue="@(new DateTime(2024, 6, 1))"
TickInterval="ChartAxisInterval.Week"
MinorTickInterval="ChartAxisInterval.Day"
MinRange="ChartAxisInterval.Week"
MaxRange="ChartAxisInterval.Month"
ValueType="ChartAxisDataType.DateTime">
<DxRangeSelectorScaleMarker>
<DxRangeSelectorScaleMarkerLabel>
<DxTextFormatSettings Type="TextFormat.MonthAndYear" />
</DxRangeSelectorScaleMarkerLabel>
</DxRangeSelectorScaleMarker>
</DxRangeSelectorScale>
<DxRangeSelectorSliderMarker>
<DxTextFormatSettings Type="TextFormat.MonthAndDay" />
</DxRangeSelectorSliderMarker>
</DxRangeSelector>
The ValueChangeMode property switches between live or delayed range updates:
OnHandleMove: selection changes while a user moves a handle.OnHandleRelease: selection changes when a user releases a handle.To respond to value changes, handle the ValueChanged event.
You can also use the SelectedRangeUpdateMode property to specify how the selected range should behave if new values are added to the data source.
The following code snippet sets the value change mode to OnHandleMove, obtains values of the current range in a ValueChanged event handler, and displays the number of selected days:
<span><b>@DaysCount days are selected</b></span>
<DxRangeSelector Width="1100px"
Height="200px"
SelectedRangeStartValue="@(new DateTime(2024, 2, 1))"
SelectedRangeEndValue="@(new DateTime(2024, 2, 14))"
ValueChanged="@OnValueChanged"
ValueChangeMode="RangeSelectorValueChangeMode.OnHandleMove">
<DxRangeSelectorScale StartValue="@(new DateTime(2024, 1, 1))"
EndValue="@(new DateTime(2024, 6, 1))"
TickInterval="ChartAxisInterval.Week"
MinorTickInterval="ChartAxisInterval.Day"
MinRange="ChartAxisInterval.Week"
MaxRange="ChartAxisInterval.Month"
ValueType="ChartAxisDataType.DateTime">
<DxRangeSelectorScaleMarker>
<DxRangeSelectorScaleMarkerLabel>
<DxTextFormatSettings Type="TextFormat.MonthAndYear" />
</DxRangeSelectorScaleMarkerLabel>
</DxRangeSelectorScaleMarker>
</DxRangeSelectorScale>
<DxRangeSelectorSliderMarker>
<DxTextFormatSettings Type="TextFormat.MonthAndDay" />
</DxRangeSelectorSliderMarker>
</DxRangeSelector>
@code {
double DaysCount { get; set; } = 14;
void OnValueChanged(RangeSelectorValueChangedEventArgs args) {
var startDate = args.CurrentRange.FirstOrDefault() as DateTime?;
var endDate = args.CurrentRange.LastOrDefault() as DateTime?;
if (startDate != null && endDate != null)
DaysCount = (endDate - startDate).Value.TotalDays;
}
}
The Range Selector displays values on a linear scale. To manage the scale, add a DxRangeSelectorScale object to the component markup. You can specify DxRangeSelectorScale class properties or add nested objects to customize the scale’s visual elements.
The image below demonstrates visual elements related to the scale:
Show the Scale Structure
DxRangeSelector
The Range Selector creates a scale based on the bound data source (the DxRangeSelector.Data property). Use StartValue and EndValue properties to limit the scale’s visual range.
<DxRangeSelector Width="1100px"
Height="200px"
SelectedRangeStartValue="@(new DateTime(2024, 2, 1))"
SelectedRangeEndValue="@(new DateTime(2024, 2, 14))">
<DxRangeSelectorScale StartValue="@(new DateTime(2024, 1, 1))"
EndValue="@(new DateTime(2024, 6, 1))"
MinorTickInterval="ChartAxisInterval.Day"
TickInterval="ChartAxisInterval.Week"
MaxRange="ChartAxisInterval.Month"
MinRange="ChartAxisInterval.Week"
ValueType="ChartAxisDataType.DateTime">
@* ... *@
</DxRangeSelectorScale>
@* ... *@
</DxRangeSelector>
The Range Selector calculates major and minor tick intervals automatically based on data source values. You can use the following properties to change intervals:
TickInterval | MinorTickIntervalSet custom intervals for major and minor ticks.MinorTickCountSpecifies the number of minor ticks between two neighboring major ticks.
The following code snippet sets the major tick interval to a week and the minor tick interval to a day:
<DxRangeSelector Width="1100px"
Height="200px"
SelectedRangeStartValue="@(new DateTime(2024, 2, 1))"
SelectedRangeEndValue="@(new DateTime(2024, 2, 14))">
<DxRangeSelectorScale StartValue="@(new DateTime(2024, 1, 1))"
EndValue="@(new DateTime(2024, 6, 1))"
MinorTickInterval="ChartAxisInterval.Day"
TickInterval="ChartAxisInterval.Week"
MaxRange="ChartAxisInterval.Month"
MinRange="ChartAxisInterval.Week"
ValueType="ChartAxisDataType.DateTime">
@* ... *@
</DxRangeSelectorScale>
@* ... *@
</DxRangeSelector>
The DevExpress Blazor Range Selector component allows you to visualize data as a chart. Follow the steps below to display a chart:
Show the Chart Structure
DxRangeSelector
Run Demo: Overview Run Demo: Discrete Scale
The DxRangeSelectorChart component supports the same series types as the Blazor DxChart component. To create a series, choose a series type and specify its ArgumentField and ValueField properties.
The following code snippet creates a chart with bars where each bar corresponds to a country’s population (see the image above):
<DxRangeSelector Width="700px"
Height="300px"
Data="@Data">
<DxTitleSettings Text="Population by Country, 2023" />
<DxRangeSelectorChart>
<DxChartBarSeries ArgumentField="@((PopulationPoint s) => s.Country)"
ValueField="@((PopulationPoint s) => s.Value)" />
</DxRangeSelectorChart>
</DxRangeSelector>
@code {
List<PopulationPoint> Data;
protected override void OnInitialized() {
Data = GetData();
}
}
public List<PopulationPoint> GetData() {
var result = new List<PopulationPoint>(14);
result.Add(new PopulationPoint("India", 1428627663));
result.Add(new PopulationPoint("China", 1425671352));
result.Add(new PopulationPoint("United States", 339996563));
result.Add(new PopulationPoint("Indonesia", 277534122));
result.Add(new PopulationPoint("Pakistan", 240485658));
result.Add(new PopulationPoint("Nigeria", 223804632));
result.Add(new PopulationPoint("Brazil", 216422446));
result.Add(new PopulationPoint("Bangladesh", 172954319));
result.Add(new PopulationPoint("Russia", 144444359));
result.Add(new PopulationPoint("Mexico", 128455567));
result.Add(new PopulationPoint("Ethiopia", 126527060));
result.Add(new PopulationPoint("Japan", 123294513));
result.Add(new PopulationPoint("Philippines", 117337368));
result.Add(new PopulationPoint("Egypt", 112716598));
return result;
}
public class PopulationPoint {
public string Country { get; set; }
public long Value { get; set; }
public PopulationPoint(string country, long value) {
Country = country;
Value = value;
}
}
Refer to the following article for additional information about available series types: Series Types in Blazor Charts.
DxRangeSelectorChart class APIs include the following series-specific options:
You can also use TopIndent and BottomIndent properties to position a series on a chart pane.
DxRangeSelectorScale and DxRangeSelectorChartValueAxis objects define axes in the Range Selector’s chart. Add these objects to the component markup to manage axes.
The value axis does not support any visual elements while the scale displays labels and markers (see the Scale section).
The Range Selector component supports the following axis types:
ContiniousDisplays numeric and DateTime arguments/values.DiscreteDisplays string arguments/values (categories).LogarithmicDisplays numeric arguments/values that grow exponentially. Each axis tick value is a specified logarithm base raised to a power (10⁻², 10⁻¹, 10⁰, 10¹, 10², and so on).
Range Selector determines axis types based on the data type of the first series in the chart markup. You can use DxRangeSelectorScale.Type and DxRangeSelectorChartValueAxis.Type properties to change axis types.
You may need to cast values specified in the data source. For example, you must do it if data source stores dates or numbers as strings. Use DxRangeSelectorScale.ValueType and DxRangeSelectorChartValueAxis.ValueType properties to specify axis value types.
<DxRangeSelector Width="1200px"
Height="300px"
Data="@Data">
<DxTitleSettings Text="Population by Country, 2023" />
<DxRangeSelectorChart>
<DxRangeSelectorChartValueAxis ValueType="ChartAxisDataType.Numeric" />
<DxChartBarSeries ArgumentField="@((PopulationPoint s) => s.Country)"
ValueField="@((PopulationPoint s) => s.Value)" />
</DxRangeSelectorChart>
</DxRangeSelector>
@code {
List<PopulationPoint> Data;
protected override void OnInitialized() {
Data = GetData();
}
}
public List<PopulationPoint> GetData() {
var result = new List<PopulationPoint>(14);
result.Add(new PopulationPoint("India", "1428627663"));
result.Add(new PopulationPoint("China", "1425671352"));
result.Add(new PopulationPoint("United States", "339996563"));
result.Add(new PopulationPoint("Indonesia", "277534122"));
result.Add(new PopulationPoint("Pakistan", "240485658"));
result.Add(new PopulationPoint("Nigeria", "223804632"));
result.Add(new PopulationPoint("Brazil", "216422446"));
result.Add(new PopulationPoint("Bangladesh", "172954319"));
result.Add(new PopulationPoint("Russia", "144444359"));
result.Add(new PopulationPoint("Mexico", "128455567"));
result.Add(new PopulationPoint("Ethiopia", "126527060"));
result.Add(new PopulationPoint("Japan", "123294513"));
result.Add(new PopulationPoint("Philippines", "117337368"));
result.Add(new PopulationPoint("Egypt", "112716598"));
return result;
}
public class PopulationPoint {
public string Country { get; set; }
public string Value { get; set; }
public PopulationPoint(string country, string value) {
Country = country;
Value = value;
}
}
The <DxRangeSelector> component allows you to define start/min and end/max axis values. Use the following properties:
@using System.Linq.Expressions
<DxRangeSelector Width="100%"
Data="@Data"
ValueChangeMode="RangeSelectorValueChangeMode.OnHandleMove">
<DxRangeSelectorChart>
@CreateChartAreaSeries(s => s.Y1)
@CreateChartAreaSeries(s => s.Y2)
@CreateChartAreaSeries(s => s.Y3)
<DxRangeSelectorChartValueAxis MinValue="-10"
MaxValue="50" />
</DxRangeSelectorChart>
<DxRangeSelectorScale TickInterval="50"
StartValue="100"
EndValue="400" />
</DxRangeSelector>
@code {
IEnumerable<RangePoint> Data = Enumerable.Empty<RangePoint>();
protected override void OnInitialized() {
Data = GenerateData();
}
private RenderFragment CreateChartAreaSeries(Expression<Func<RangePoint, double>> valueField) =>
@<DxChartAreaSeries ArgumentField="@(s => s.Arg)"
ValueField="@(valueField)">
</DxChartAreaSeries>
;
}
public List<RangePoint> GenerateData() {
return new List<RangePoint>() {
new RangePoint { Arg = 10, Y1 = -12, Y2 = 10, Y3 = 32 },
new RangePoint { Arg = 20, Y1 = -32, Y2 = 30, Y3 = 12 },
new RangePoint { Arg = 40, Y1 = -20, Y2 = 20, Y3 = 30 },
new RangePoint { Arg = 50, Y1 = -39, Y2 = 50, Y3 = 19 },
new RangePoint { Arg = 60, Y1 = -10, Y2 = 10, Y3 = 15 },
new RangePoint { Arg = 75, Y1 = 10, Y2 = 10, Y3 = 15 },
new RangePoint { Arg = 80, Y1 = 30, Y2 = 50, Y3 = 13 },
new RangePoint { Arg = 90, Y1 = 40, Y2 = 50, Y3 = 14 },
new RangePoint { Arg = 100, Y1 = 50, Y2 = 90, Y3 = 90 },
new RangePoint { Arg = 105, Y1 = 40, Y2 = 175, Y3 = 120 },
new RangePoint { Arg = 110, Y1 = -12, Y2 = 10, Y3 = 32 },
new RangePoint { Arg = 120, Y1 = -32, Y2 = 30, Y3 = 12 },
new RangePoint { Arg = 130, Y1 = -20, Y2 = 20, Y3 = 30 },
new RangePoint { Arg = 140, Y1 = -12, Y2 = 10, Y3 = 32 },
new RangePoint { Arg = 150, Y1 = -32, Y2 = 30, Y3 = 12 },
new RangePoint { Arg = 160, Y1 = -20, Y2 = 20, Y3 = 30 },
new RangePoint { Arg = 170, Y1 = -39, Y2 = 50, Y3 = 19 },
new RangePoint { Arg = 180, Y1 = -10, Y2 = 10, Y3 = 15 },
new RangePoint { Arg = 185, Y1 = 10, Y2 = 10, Y3 = 15 },
new RangePoint { Arg = 190, Y1 = 30, Y2 = 100, Y3 = 13 },
new RangePoint { Arg = 200, Y1 = 40, Y2 = 110, Y3 = 14 },
new RangePoint { Arg = 210, Y1 = 50, Y2 = 90, Y3 = 90 },
new RangePoint { Arg = 220, Y1 = 40, Y2 = 95, Y3 = 120 },
new RangePoint { Arg = 230, Y1 = -12, Y2 = 10, Y3 = 32 },
new RangePoint { Arg = 240, Y1 = -32, Y2 = 30, Y3 = 12 },
new RangePoint { Arg = 255, Y1 = -20, Y2 = 20, Y3 = 30 },
new RangePoint { Arg = 270, Y1 = -12, Y2 = 10, Y3 = 32 },
new RangePoint { Arg = 280, Y1 = -32, Y2 = 30, Y3 = 12 },
new RangePoint { Arg = 290, Y1 = -20, Y2 = 20, Y3 = 30 },
new RangePoint { Arg = 295, Y1 = -39, Y2 = 50, Y3 = 19 },
new RangePoint { Arg = 300, Y1 = -10, Y2 = 10, Y3 = 15 },
new RangePoint { Arg = 310, Y1 = 10, Y2 = 10, Y3 = 15 },
new RangePoint { Arg = 320, Y1 = 30, Y2 = 100, Y3 = 13 },
new RangePoint { Arg = 330, Y1 = 40, Y2 = 110, Y3 = 14 },
new RangePoint { Arg = 340, Y1 = 50, Y2 = 90, Y3 = 90 },
new RangePoint { Arg = 350, Y1 = 40, Y2 = 95, Y3 = 120 },
new RangePoint { Arg = 360, Y1 = -12, Y2 = 10, Y3 = 32 },
new RangePoint { Arg = 367, Y1 = -32, Y2 = 30, Y3 = 12 },
new RangePoint { Arg = 370, Y1 = -20, Y2 = 20, Y3 = 30 },
new RangePoint { Arg = 380, Y1 = -12, Y2 = 10, Y3 = 32 },
new RangePoint { Arg = 390, Y1 = -32, Y2 = 30, Y3 = 12 },
new RangePoint { Arg = 400, Y1 = -20, Y2 = 20, Y3 = 30 },
new RangePoint { Arg = 410, Y1 = -39, Y2 = 50, Y3 = 19 },
new RangePoint { Arg = 420, Y1 = -10, Y2 = 10, Y3 = 15 },
new RangePoint { Arg = 430, Y1 = 10, Y2 = 10, Y3 = 15 },
new RangePoint { Arg = 440, Y1 = 30, Y2 = 100, Y3 = 13 },
new RangePoint { Arg = 450, Y1 = 40, Y2 = 110, Y3 = 14 },
new RangePoint { Arg = 460, Y1 = 50, Y2 = 90, Y3 = 90 },
new RangePoint { Arg = 470, Y1 = 40, Y2 = 95, Y3 = 120 },
new RangePoint { Arg = 480, Y1 = -12, Y2 = 10, Y3 = 32 },
new RangePoint { Arg = 490, Y1 = -32, Y2 = 30, Y3 = 12 },
new RangePoint { Arg = 500, Y1 = -20, Y2 = 20, Y3 = 30 },
new RangePoint { Arg = 510, Y1 = -12, Y2 = 10, Y3 = 32 },
new RangePoint { Arg = 520, Y1 = -32, Y2 = 30, Y3 = 12 },
new RangePoint { Arg = 530, Y1 = -20, Y2 = 20, Y3 = 30 },
new RangePoint { Arg = 540, Y1 = -39, Y2 = 50, Y3 = 19 },
new RangePoint { Arg = 550, Y1 = -10, Y2 = 10, Y3 = 15 },
new RangePoint { Arg = 555, Y1 = 10, Y2 = 10, Y3 = 15 },
new RangePoint { Arg = 560, Y1 = 30, Y2 = 100, Y3 = 13 },
new RangePoint { Arg = 570, Y1 = 40, Y2 = 110, Y3 = 14 },
new RangePoint { Arg = 580, Y1 = 50, Y2 = 90, Y3 = 90 },
new RangePoint { Arg = 590, Y1 = 40, Y2 = 95, Y3 = 12 },
new RangePoint { Arg = 600, Y1 = -12, Y2 = 10, Y3 = 32 },
new RangePoint { Arg = 610, Y1 = -32, Y2 = 30, Y3 = 12 },
new RangePoint { Arg = 620, Y1 = -20, Y2 = 20, Y3 = 30 },
new RangePoint { Arg = 630, Y1 = -12, Y2 = 10, Y3 = 32 },
new RangePoint { Arg = 640, Y1 = -32, Y2 = 30, Y3 = 12 },
new RangePoint { Arg = 650, Y1 = -20, Y2 = 20, Y3 = 30 }
};
}
public class RangePoint {
public int Arg { get; set; }
public int Y1 { get; set; }
public int Y2 { get; set; }
public int Y3 { get; set; }
}
The <DxRange Selector> component can display a title and subtitle. Add DxTitleSettings and DxSubtitleSettings objects to the component markup to configure title and subtitle settings.
The following code snippet displays and customizes the Range Selector’s title:
<DxRangeSelector Width="700px"
Height="300px"
Data="@Data">
<DxTitleSettings Text="Population by Country, 2023" VerticalAlignment="VerticalEdge.Bottom">
<DxFontSettings Weight="700" Opacity="0.6" />
</DxTitleSettings>
<DxRangeSelectorChart>
<DxChartBarSeries ArgumentField="@((PopulationPoint s) => s.Country)"
ValueField="@((PopulationPoint s) => s.Value)" />
</DxRangeSelectorChart>
</DxRangeSelector>
@code {
List<PopulationPoint> Data;
protected override void OnInitialized() {
Data = GetData();
}
}
The <DxRangeSelector> component allows you to export and print its data. Call the PrintAsync() method to invoke the browser’s Print dialog.
To export component data, call the ExportToAsync(String, DataExportFormat) method. After the file is exported, the component raises the Exported event.
Call the GetSvgMarkupAsync() method to obtain the Range Selector’s SVG markup.
The following code snippet displays a custom Export to PDF button that exports component data to a PDF file. The Exported event handler displays information about the exported file:
@rendermode InteractiveServer
<DxRangeSelector Width="1000px"
Height="400px"
@ref="RangeSelector"
Data="@Data"
Exported="@OnExported"
ValueChangeMode="RangeSelectorValueChangeMode.OnHandleMove">
<DxTitleSettings Text="Population by Country, 2023" />
<DxRangeSelectorChart>
<DxChartBarSeries ArgumentField="@((PopulationPoint s) => s.Country)"
ValueField="@((PopulationPoint s) => s.Value)" />
</DxRangeSelectorChart>
</DxRangeSelector>
<DxButton Text="Export to PDF" Click="@ExportToPdf" />
@code {
DxRangeSelector RangeSelector;
string fileName = "RangeSelector.pdf";
async Task ExportToPdf() {
await RangeSelector.ExportToAsync("Range Selector", DataExportFormat.Pdf);
}
async Task OnExported() {
await JSRuntime.InvokeVoidAsync("alert", $"The Range Selector is exported to the {fileName} file.");
}
List<PopulationPoint> Data;
protected override void OnInitialized() {
Data = GetData();
}
}
public List<PopulationPoint> GetData() {
var result = new List<PopulationPoint>(14);
result.Add(new PopulationPoint("India", 1428627663));
result.Add(new PopulationPoint("China", 1425671352));
result.Add(new PopulationPoint("United States", 339996563));
result.Add(new PopulationPoint("Indonesia", 277534122));
result.Add(new PopulationPoint("Pakistan", 240485658));
result.Add(new PopulationPoint("Nigeria", 223804632));
result.Add(new PopulationPoint("Brazil", 216422446));
result.Add(new PopulationPoint("Bangladesh", 172954319));
result.Add(new PopulationPoint("Russia", 144444359));
result.Add(new PopulationPoint("Mexico", 128455567));
result.Add(new PopulationPoint("Ethiopia", 126527060));
result.Add(new PopulationPoint("Japan", 123294513));
result.Add(new PopulationPoint("Philippines", 117337368));
result.Add(new PopulationPoint("Egypt", 112716598));
return result;
}
public class PopulationPoint {
public string Country { get; set; }
public long Value { get; set; }
public PopulationPoint(string country, long value) {
Country = country;
Value = value;
}
}
Use Height and Width properties to specify the size of the <DxRangeSelector> component.
<DxRangeSelector Width="800px"
Height="400px"
Data="@Data">
@* ... *@
</DxRangeSelector>
When the container size changes at runtime, the component is redrawn. To disable this behavior, set the RedrawOnResize property to false.
You can also configure indents between the Range Selector’s container edges and the scale. Add a DxRangeSelectorIndent object to the component markup and specify Left and Right properties.
<DxRangeSelector Width="1000px"
Height="100px"
SelectedRangeStartValue="@(new DateTime(2024, 2, 1))"
SelectedRangeEndValue="@(new DateTime(2024, 2, 14))">
<DxRangeSelectorScale StartValue="@(new DateTime(2024, 1, 1))"
EndValue="@(new DateTime(2024, 6, 1))"
MinorTickInterval="ChartAxisInterval.Day"
TickInterval="ChartAxisInterval.Week"
MaxRange="ChartAxisInterval.Month"
MinRange="ChartAxisInterval.Week"
ValueType="ChartAxisDataType.DateTime">
<DxRangeSelectorScaleMarker Visible="false" />
</DxRangeSelectorScale>
<DxRangeSelectorIndent Left="35" Right="35" />
</DxRangeSelector>
This section describes settings that allow you to customize the appearance of the Range Selector component and its elements.
The Range Selector supports customization options for individual visual elements. The table below lists such elements, their markup objects/customization properties, and corresponding visibility settings (if any).
| Elements | Markup object/Property | Visibility Option |
|---|---|---|
| Selected range | DxRangeSelector.SelectedRangeColor | Always visible |
| Slider markers | DxRangeSelectorSliderMarker | DxRangeSelectorSliderMarker.Visible |
| Slider handles | DxRangeSelectorSliderHandle | Always visible |
| Scale major ticks | DxRangeSelectorScaleTick | Always visible |
| Scale minor ticks | DxRangeSelectorScaleMinorTick | DxRangeSelectorScaleMinorTick.Visible |
| Scale label | DxRangeSelectorScaleLabel | DxRangeSelectorScaleLabel.Visible |
| Scale marker | DxRangeSelectorScaleMarker | DxRangeSelectorScaleMarker.Visible |
| Scale marker label | DxRangeSelectorScaleMarkerLabel | Depends on the DxRangeSelectorScaleMarker.Visible setting |
The following code snippet sets up a DateTime scale, customizes slider markers, and hides scale markers:
<DxRangeSelector Width="1000px"
Height="400px"
SelectedRangeStartValue="@(new DateTime(2024, 2, 1))"
SelectedRangeEndValue="@(new DateTime(2024, 2, 14))">
<DxRangeSelectorSliderMarker PaddingLeftRight="5"
PaddingTopBottom="10"
Color="#28a745">
<DxFontSettings Weight="600" />
<DxTextFormatSettings Type="TextFormat.ShortDate" />
</DxRangeSelectorSliderMarker>
<DxRangeSelectorScale StartValue="@(new DateTime(2024, 1, 1))"
EndValue="@(new DateTime(2024, 6, 1))"
MinorTickInterval="ChartAxisInterval.Day"
TickInterval="ChartAxisInterval.Week"
MaxRange="ChartAxisInterval.Month"
MinRange="ChartAxisInterval.Week"
ValueType="ChartAxisDataType.DateTime">
<DxRangeSelectorScaleMarker Visible="false" />
</DxRangeSelectorScale>
</DxRangeSelector>
Add a DxRangeSelectorBackground object to the DxRangeSelector component markup to customize the component’s background area. You can apply the following customizations:
To disable background customizations, set the Enabled property to false.
<DxRangeSelector Width="800px"
Height="200px">
<DxRangeSelectorScale StartValue="@(new DateTime(2024, 8, 29, 0, 0, 0))"
EndValue="@(new DateTime(2024, 8, 29, 23, 59, 59))"
MinorTickInterval="ChartAxisInterval.Hour"
TickInterval="ChartAxisInterval.Hours(2)"
PlaceholderHeight="20"
ValueType="ChartAxisDataType.DateTime">
<DxRangeSelectorScaleLabel Visible="true">
<DxTextFormatSettings Type="TextFormat.ShortTime" />
</DxRangeSelectorScaleLabel>
</DxRangeSelectorScale>
<DxTitleSettings Text="Select a Time Period" />
<DxRangeSelectorBackground ImageUrl="images/background.png"
ImagePosition="RangeSelectorBackgroundImagePosition.Center"
Color="#d7c2ed" />
</DxRangeSelector>
Background color settings also apply to the Range Selector’s shutters that cover unselected ranges on the scale. To apply specific color settings to shutters, add a DxRangeSelectorShutter object to the component markup and specify Color and Opacity properties.
<DxRangeSelector Width="1200px"
Height="300px"
Data="@Data">
<DxTitleSettings Text="Population by Country, 2023" />
<DxRangeSelectorChart>
<DxChartBarSeries ArgumentField="@((PopulationPoint s) => s.Country)"
ValueField="@((PopulationPoint s) => s.Value)" />
</DxRangeSelectorChart>
<DxRangeSelectorShutter Color="powderblue"
Opacity="0.6" />
</DxRangeSelector>
The <DxRangeSelector> component allows you to create a custom palette for chart series. To apply a palette, assign it to the Palette property.
When the number of series exceeds the number of palette colors, you can specify a PaletteExtensionMode.
The following code snippet applies a custom palette to DxRangeSelectorChart series and changes the palette’s extension mode:
@using System.Linq.Expressions
<label>Palette Extension Mode:</label>
<DxComboBox Data="Enum.GetValues<ChartPaletteExtensionMode>()"
@bind-Value="@ExtensionMode" />
<DxRangeSelector Width="100%"
Data="@Data"
ValueChangeMode="RangeSelectorValueChangeMode.OnHandleMove">
<DxRangeSelectorChart Palette="@Palette"
PaletteExtensionMode="@ExtensionMode">
@CreateChartAreaSeries(s => s.Y1)
@CreateChartAreaSeries(s => s.Y2)
@CreateChartAreaSeries(s => s.Y3)
</DxRangeSelectorChart>
<DxRangeSelectorScale TickInterval="50" />
</DxRangeSelector>
@code {
ChartPaletteExtensionMode ExtensionMode { get; set; } = ChartPaletteExtensionMode.Alternate;
string[] Palette => new string[] { "#5f368d", "#28a745" };
IEnumerable<RangePoint> Data = Enumerable.Empty<RangePoint>();
protected override void OnInitialized() {
Data = GenerateData();
}
private RenderFragment CreateChartAreaSeries(Expression<Func<RangePoint, double>> valueField) =>
@<DxChartAreaSeries ArgumentField="@(s => s.Arg)"
ValueField="@(valueField)">
</DxChartAreaSeries>
;
}
public List<RangePoint> GenerateData() {
return new List<RangePoint>() {
new RangePoint { Arg = 10, Y1 = -12, Y2 = 10, Y3 = 32 },
new RangePoint { Arg = 20, Y1 = -32, Y2 = 30, Y3 = 12 },
new RangePoint { Arg = 40, Y1 = -20, Y2 = 20, Y3 = 30 },
new RangePoint { Arg = 50, Y1 = -39, Y2 = 50, Y3 = 19 },
new RangePoint { Arg = 60, Y1 = -10, Y2 = 10, Y3 = 15 },
new RangePoint { Arg = 75, Y1 = 10, Y2 = 10, Y3 = 15 },
new RangePoint { Arg = 80, Y1 = 30, Y2 = 50, Y3 = 13 },
new RangePoint { Arg = 90, Y1 = 40, Y2 = 50, Y3 = 14 },
new RangePoint { Arg = 100, Y1 = 50, Y2 = 90, Y3 = 90 },
new RangePoint { Arg = 105, Y1 = 40, Y2 = 175, Y3 = 120 },
new RangePoint { Arg = 110, Y1 = -12, Y2 = 10, Y3 = 32 },
new RangePoint { Arg = 120, Y1 = -32, Y2 = 30, Y3 = 12 },
new RangePoint { Arg = 130, Y1 = -20, Y2 = 20, Y3 = 30 },
new RangePoint { Arg = 140, Y1 = -12, Y2 = 10, Y3 = 32 },
new RangePoint { Arg = 150, Y1 = -32, Y2 = 30, Y3 = 12 },
new RangePoint { Arg = 160, Y1 = -20, Y2 = 20, Y3 = 30 },
new RangePoint { Arg = 170, Y1 = -39, Y2 = 50, Y3 = 19 },
new RangePoint { Arg = 180, Y1 = -10, Y2 = 10, Y3 = 15 },
new RangePoint { Arg = 185, Y1 = 10, Y2 = 10, Y3 = 15 },
new RangePoint { Arg = 190, Y1 = 30, Y2 = 100, Y3 = 13 },
new RangePoint { Arg = 200, Y1 = 40, Y2 = 110, Y3 = 14 },
new RangePoint { Arg = 210, Y1 = 50, Y2 = 90, Y3 = 90 },
new RangePoint { Arg = 220, Y1 = 40, Y2 = 95, Y3 = 120 },
new RangePoint { Arg = 230, Y1 = -12, Y2 = 10, Y3 = 32 },
new RangePoint { Arg = 240, Y1 = -32, Y2 = 30, Y3 = 12 },
new RangePoint { Arg = 255, Y1 = -20, Y2 = 20, Y3 = 30 },
new RangePoint { Arg = 270, Y1 = -12, Y2 = 10, Y3 = 32 },
new RangePoint { Arg = 280, Y1 = -32, Y2 = 30, Y3 = 12 },
new RangePoint { Arg = 290, Y1 = -20, Y2 = 20, Y3 = 30 },
new RangePoint { Arg = 295, Y1 = -39, Y2 = 50, Y3 = 19 },
new RangePoint { Arg = 300, Y1 = -10, Y2 = 10, Y3 = 15 },
new RangePoint { Arg = 310, Y1 = 10, Y2 = 10, Y3 = 15 },
new RangePoint { Arg = 320, Y1 = 30, Y2 = 100, Y3 = 13 },
new RangePoint { Arg = 330, Y1 = 40, Y2 = 110, Y3 = 14 },
new RangePoint { Arg = 340, Y1 = 50, Y2 = 90, Y3 = 90 },
new RangePoint { Arg = 350, Y1 = 40, Y2 = 95, Y3 = 120 },
new RangePoint { Arg = 360, Y1 = -12, Y2 = 10, Y3 = 32 },
new RangePoint { Arg = 367, Y1 = -32, Y2 = 30, Y3 = 12 },
new RangePoint { Arg = 370, Y1 = -20, Y2 = 20, Y3 = 30 },
new RangePoint { Arg = 380, Y1 = -12, Y2 = 10, Y3 = 32 },
new RangePoint { Arg = 390, Y1 = -32, Y2 = 30, Y3 = 12 },
new RangePoint { Arg = 400, Y1 = -20, Y2 = 20, Y3 = 30 },
new RangePoint { Arg = 410, Y1 = -39, Y2 = 50, Y3 = 19 },
new RangePoint { Arg = 420, Y1 = -10, Y2 = 10, Y3 = 15 },
new RangePoint { Arg = 430, Y1 = 10, Y2 = 10, Y3 = 15 },
new RangePoint { Arg = 440, Y1 = 30, Y2 = 100, Y3 = 13 },
new RangePoint { Arg = 450, Y1 = 40, Y2 = 110, Y3 = 14 },
new RangePoint { Arg = 460, Y1 = 50, Y2 = 90, Y3 = 90 },
new RangePoint { Arg = 470, Y1 = 40, Y2 = 95, Y3 = 120 },
new RangePoint { Arg = 480, Y1 = -12, Y2 = 10, Y3 = 32 },
new RangePoint { Arg = 490, Y1 = -32, Y2 = 30, Y3 = 12 },
new RangePoint { Arg = 500, Y1 = -20, Y2 = 20, Y3 = 30 },
new RangePoint { Arg = 510, Y1 = -12, Y2 = 10, Y3 = 32 },
new RangePoint { Arg = 520, Y1 = -32, Y2 = 30, Y3 = 12 },
new RangePoint { Arg = 530, Y1 = -20, Y2 = 20, Y3 = 30 },
new RangePoint { Arg = 540, Y1 = -39, Y2 = 50, Y3 = 19 },
new RangePoint { Arg = 550, Y1 = -10, Y2 = 10, Y3 = 15 },
new RangePoint { Arg = 555, Y1 = 10, Y2 = 10, Y3 = 15 },
new RangePoint { Arg = 560, Y1 = 30, Y2 = 100, Y3 = 13 },
new RangePoint { Arg = 570, Y1 = 40, Y2 = 110, Y3 = 14 },
new RangePoint { Arg = 580, Y1 = 50, Y2 = 90, Y3 = 90 },
new RangePoint { Arg = 590, Y1 = 40, Y2 = 95, Y3 = 12 },
new RangePoint { Arg = 600, Y1 = -12, Y2 = 10, Y3 = 32 },
new RangePoint { Arg = 610, Y1 = -32, Y2 = 30, Y3 = 12 },
new RangePoint { Arg = 620, Y1 = -20, Y2 = 20, Y3 = 30 },
new RangePoint { Arg = 630, Y1 = -12, Y2 = 10, Y3 = 32 },
new RangePoint { Arg = 640, Y1 = -32, Y2 = 30, Y3 = 12 },
new RangePoint { Arg = 650, Y1 = -20, Y2 = 20, Y3 = 30 }
};
}
public class RangePoint {
public int Arg { get; set; }
public int Y1 { get; set; }
public int Y2 { get; set; }
public int Y3 { get; set; }
}
If a Blazor application throws unexpected exceptions, refer to the following help topic: Troubleshooting.
Object ComponentBase DxComponentBase DevExpress.Blazor.ClientComponents.Internal.ClientComponentBase DevExpress.Blazor.ClientComponents.Internal.ClientComponentJSInterop DxRangeSelector
See Also