Touch Support in UWP Range Slider (SfRangeSlider)

10 May 20213 minutes to read

With the MoveToPoint property, you can move the thumb of the SfRangeSlider by tapping or clicking on the track of the SfRangeSlider. This property provides the following options:

  • MoveToTapPosition
  • IncrementBySmallChange
  • IncrementByLargeChange
  • None

MoveToTapPosition

To move the thumb of the SfRangeSlider to the tapped position, you must set the MoveToPoint property to MoveToTapPosition, and then tap or click on the track of the SfRangeSlider. This will move the thumb to the tapped position.

The following code example and screen shot illustrate this.

<editors:SfRangeSlider x:Name="rangeSlider" Width="200" HorizontalAlignment="Center" Minimum="0" Maximum="100" Value="50" SmallChange="5" LargeChange="10" MoveToPoint="MoveToTapPosition"/>
rangeSlider.MoveToPoint = Syncfusion.UI.Xaml.Controls.Input.MovePoint.MoveToTapPosition;
rangeSlider.MoveToPoint = Syncfusion.UI.Xaml.Controls.Input.MovePoint.MoveToTapPosition

RangeSlider MoveToPoint view

IncrementBySmallChange

To move the thumb of the RangeSlider based on the SmallChange value, you must set the MoveToPoint property to IncrementBySmallChange, and then tap or click on the track of the SfRangeSlider. This will increment the SfRangeSlider value by the SmallChange value.

The following code example and screen shot illustrates this.

<editors:SfRangeSlider x:Name="rangeSlider" Width="200" HorizontalAlignment="Center" Minimum="0" Maximum="100" Value="50" SmallChange="5" LargeChange="10" MoveToPoint="IncrementBySmallChange"/>
rangeSlider.MoveToPoint = Syncfusion.UI.Xaml.Controls.Input.MovePoint.IncrementBySmallChange;
rangeSlider.MoveToPoint = Syncfusion.UI.Xaml.Controls.Input.MovePoint.IncrementBySmallChange

RangeSlider MoveToPoint IncrementBySmallChange view

IncrementByLargeChange

To move the thumb of the SfRangeSlider based on the LargeChange value, you must set the MoveToPoint property to IncrementByLargeChange, and then tap on the track of the SfRangeSlider. This will increment the SfRangeSlider value by the LargeChange value.

The following code example and screen shot illustrates this.

<editors:SfRangeSlider x:Name="rangeSlider" Width="200" HorizontalAlignment="Center" Minimum="0" Maximum="100" Value="50" SmallChange="5" LargeChange="10" MoveToPoint="IncrementByLargeChange"/>
rangeSlider.MoveToPoint = Syncfusion.UI.Xaml.Controls.Input.MovePoint.IncrementByLargeChange;
rangeSlider.MoveToPoint = Syncfusion.UI.Xaml.Controls.Input.MovePoint.IncrementByLargeChange

RangeSlider MoveToPoint IncrementByLargeChange view

None

To fix the thumb movement of the SfRangeSlider, you must set the MoveToPoint property to None. This will not allow thumb movement of the SfRangeSlider.

The following code example and screen shot illustrates this.

<editors:SfRangeSlider x:Name="rangeSlider" Width="200" HorizontalAlignment="Center" Minimum="0" Maximum="100" Value="50" SmallChange="5" LargeChange="10" MoveToPoint="None"/>
rangeSlider.MoveToPoint = Syncfusion.UI.Xaml.Controls.Input.MovePoint.None;
rangeSlider.MoveToPoint = Syncfusion.UI.Xaml.Controls.Input.MovePoint.None

RangeSlider MoveToPoint None view