# Range Selector

## Content



While scrollbars are a traditional way of scrolling the chart, Range Selector is a more modern approach, which lets the user visualize where the selected range sits in the complete data range.

FlexChart's Range Selector lets you select a range of numeric data with lower value thumb and upper value thumb. These thumbs define the start and end values of the range. On dragging the thumb towards left (or down) on the range bar, you reduce its value, and dragging it towards the right (or up) increases the value on the range bar.

In FlexChart, you can work with Range Selector by creating an instance of the <span data-popup-content="This property is available in \u003ca href=\u0022/componentone/api/wpf/online-flexchart/dotnet-api/C1.WPF.Chart/C1.WPF.Chart.Interaction.C1RangeSelector.html\u0022\u003e.NET\u003c/a\u003e and \u003ca href=\u0022/componentone/api/wpf/online-flexchart/dotnet-api/C1.WPF.Chart/C1.WPF.Chart.Interaction.C1RangeSelector.html\u0022\u003e.NET Framework\u003c/a\u003e." data-popup-title="C1.WPF.Chart.Interaction.C1RangeSelector" data-popup-theme="ui-tooltip-green qtip-green">C1.WPF.Chart.Interaction.C1RangeSelector</span> class and adding it to the Layers collection of the chart by using the **Layers** property of **<span data-popup-content="This class is available in \u003ca href=\u0022/componentone/api/wpf/online-flexchart/dotnet-api/C1.WPF.Chart/C1.WPF.Chart.FlexChart.html\u0022\u003e.NET\u003c/a\u003e and \u003ca href=\u0022/componentone/api/wpf/online-flexchart/dotnet-framework-api/C1.WPF.FlexChart.4.6.2/C1.WPF.Chart.C1FlexChart.html\u0022\u003e.NET Framework\u003c/a\u003e." data-popup-title="C1FlexChart" data-popup-theme="ui-tooltip-green qtip-green">C1FlexChart</span>**. The C1RangeSelector class inherits the C1.WPF.C1RangeSlider class. You can use the LowerValue and the UpperValue property provided by C1RangeSlider to set the lower and the upper value of the range selector respectively. The ValueChanged event fires when any of the LowerValue or the UpperValue property is changed.

To set the horizontal or the vertical orientation of the range selector, you can use the Orientation property. When the property is changed, the OrientationChanged event fires.

Here is the code snippet showing the implementation:

**xml**

```xml
<c1:C1FlexChart.Layers>
    <c1:C1RangeSelector x:Name="rangeSelector" Grid.Row="4" Margin="110 10 0 10"/>
</c1:C1FlexChart.Layers>
```

### Code

```csharp
void OnChartRendered(object sender, RenderEventArgs e)
{
    var flexChart = sender as C1FlexChart;
    if (flexChart == null)
        return;
    var rect = flexChart.PlotRect;
    e.Engine.SetFill(Colors.Transparent);
    e.Engine.SetStroke(new SolidColorBrush(Colors.DimGray));
    e.Engine.SetStrokeThickness(1d);
    e.Engine.DrawRect(rect.X, rect.Y, rect.Width, rect.Height);
}
```

<br />

```vbnet
Private Sub OnChartRendered(sender As Object, e As RenderEventArgs)
    Dim flexChart = TryCast(sender, C1FlexChart)
    If flexChart Is Nothing Then
        Return
    End If
    Dim rect = flexChart.PlotRect
    e.Engine.SetFill(Colors.Transparent)
    e.Engine.SetStroke(New SolidColorBrush(Colors.DimGray))
    e.Engine.SetStrokeThickness(1.0)
    e.Engine.DrawRect(rect.X, rect.Y, rect.Width, rect.Height)
End Sub
```

![](https://cdn.mescius.io/document-site-files/images/8ba28e07-1633-4a6a-9114-13b9f1f04eed/images/rangeselector.png)