Touch Support in WPF Range Slider (SfRangeSlider)

7 May 202110 minutes to read

MoveToPoint API allows the SfRangeSlider to move the thumb by tapping or clicking the track of the SfRangeSlider. This property provides the following options:

  • MoveToTapPosition
  • IncrementBySmallChange
  • IncrementByLargeChange
  • None

MoveToTapPosition

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

The following code example and screenshot illustrates the above.

<editors:SfRangeSlider
                    Width="400"
                    LargeChange="10"
                    Maximum="100"
                    Minimum="0"
                    MoveToPoint="MoveToTapPosition"
                    SmallChange="5"
                    Value="50" />
Grid parentGrid = new Grid();
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {   
                Width = 400,
                Maximum = 100,
                Minimum = 0,
                SmallChange = 5,
                LargeChange = 10,
                MoveToPoint = MovePoint.MoveToTapPosition,
                Value = 50
            };

            parentGrid.Children.Add(rangeSlider);
            this.Content = parentGrid;

MoveToTapPosition

IncrementBySmallChange

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

The following code example and screenshot illustrates the above.

<editors:SfRangeSlider
                    Width="400"
                    LargeChange="10"
                    Maximum="100"
                    Minimum="0"
                    MoveToPoint="IncrementBySmallChange"
                    SmallChange="5"
                    Value="50" />
Grid parentGrid = new Grid();
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {   
                Width = 400,
                Maximum = 100,
                Minimum = 0,
                SmallChange = 5,
                LargeChange = 10,
                MoveToPoint = MovePoint.IncrementBySmallChange,
                Value = 50
            };

            parentGrid.Children.Add(rangeSlider);
            this.Content = parentGrid;

IncrementBySmallChange

IncrementByLargeChange

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

The following code example and screenshot illustrates the above.

<editors:SfRangeSlider
                    Width="400"
                    LargeChange="10"
                    Maximum="100"
                    Minimum="0"
                    MoveToPoint="IncrementByLargeChange"
                    SmallChange="5"
                    Value="50" />
Grid parentGrid = new Grid();
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {   
                Width = 400,
                Maximum = 100,
                Minimum = 0,
                SmallChange = 5,
                LargeChange = 10,
                MoveToPoint = MovePoint.IncrementByLargeChange,
                Value = 50
            };

            parentGrid.Children.Add(rangeSlider);
            this.Content = parentGrid;

IncrementByLargeChange

None

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

The following code example and screenshot illustrates the above.

<editors:SfRangeSlider
                    Width="400"
                    LargeChange="10"
                    Maximum="100"
                    Minimum="0"
                    MoveToPoint="None"
                    SmallChange="5"
                    Value="50" />
Grid parentGrid = new Grid();
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {   
                Width = 400,
                Maximum = 100,
                Minimum = 0,
                SmallChange = 5,
                LargeChange = 10,
                MoveToPoint = MovePoint.None,
                Value = 50
            };

            parentGrid.Children.Add(rangeSlider);
            this.Content = parentGrid;

None