RangeSelector XAML Control

The RangeSelector Control is a Double Slider control that allows the user to select a sub-range of values from a larger range of possible values. The user can slide from the left or right of the range.

Please note that if you are using a RangeSelector within a ScrollViewer you'll need to add the following code:

<controls:RangeSelector x:Name="Selector" ThumbDragStarted="Selector_OnDragStarted" ThumbDragCompleted="Selector_OnDragCompleted"></controls:RangeSelector>

private void Selector_OnDragStarted(object sender, DragStartedEventArgs e)
    ScrollViewer.HorizontalScrollMode = ScrollMode.Disabled;
    ScrollViewer.VerticalScrollMode = ScrollMode.Disabled;

private void Selector_OnDragCompleted(object sender, DragCompletedEventArgs e)
    ScrollViewer.HorizontalScrollMode = ScrollMode.Auto;
    ScrollViewer.VerticalScrollMode = ScrollMode.Auto;

This is because by default, the ScrollViewer will block the thumbs of the RangeSelector to capture the pointer.


<controls:RangeSelector x:Name="RangeSelectorControl" 

Example Image

RangeSelector animation

Example Code

RangeSelector Sample Page

Default Template

RangeSelector XAML File is the XAML template used in the toolkit for the default styling.

Requirements (Windows 10 Device Family)

Device family Universal, 10.0.10586.0 or higher
Namespace Microsoft.Toolkit.Uwp.UI.Controls