Setting Range in UWP Range Slider (SfRangeSlider)

10 May 20211 minute to read

The SfRangeSlider control supports to select range of value using two Thumbs.

ShowRange

When ShowRange property is set to true, two Thumbs are placed in the track. One Thumb is used to update the start of the range selection and another thumb is used to update the end of the range selection.

XAML

<editors:SfRangeSlider x:Name="rangeSlider" Width="200" VerticalAlignment="Center" Minimum="0" Maximum="100" ShowRange="True" RangeStart="40" RangeEnd="70"/>

C#

rangeSlider.ShowRange = true;

VB.NET

rangeSlider.ShowRange = True

RangeStart

Gets or sets the start value of the range start.

XAML

<editors:SfRangeSlider x:Name="rangeSlider" Width="200" VerticalAlignment="Center" Minimum="0" Maximum="100" ShowRange="True" RangeStart="10" RangeEnd="70"/>

C#

rangeSlider.RangeStart = 10;

VB.NET

rangeSlider.RangeStart = 10

RangeEnd

Gets or sets the end value of the range end.

XAML

<editors:SfRangeSlider x:Name="rangeSlider" Width="200" VerticalAlignment="Center" Minimum="0" Maximum="100" ShowRange="True" RangeStart="30" RangeEnd="90"  />

C#

rangeSlider.RangeEnd = 90;

VB.NET

rangeSlider.RangeEnd = 90