Ticks in WPF Range Slider (SfRangeSlider)

7 May 202117 minutes to read

RangeSlider makes it possible to place tick marks along the track in a uniform manner and also to customize the position of the tick marks.

Tick Frequency

The TickFrequency property is used to define the number of ticks along the track, based on Minimum and Maximum values.

<editors:SfRangeSlider
                    Width="200"
                    Maximum="100"
                    Minimum="0"
                    TickFrequency="20"
                    Value="40" />
Grid parentGrid = new Grid();
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {   
                Width = 200,
                Maximum = 100,
                Minimum = 0,
                TickFrequency = 20,
                Value = 40
            };

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

TickFrequency

NOTE

When the SnapsTo property is set to Ticks, the TickFrequency is used to specify the interval between snap points.

MinorTickFrequency

The MinorTickFrequency property, determines the number of minor ticks on the track between the major ticks.

<editors:SfRangeSlider
                    Width="300"
                    Maximum="100"
                    Minimum="0"
                    MinorTickFrequency="3"
                    TickFrequency="10"
                    TickPlacement="BottomRight"
                    Value="40" />
Grid parentGrid = new Grid();
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {   
                Width = 300,
                Maximum = 100,
                Minimum = 0,
                MinorTickFrequency=3,
                TickFrequency = 10,
                TickPlacement=TickPlacement.BottomRight,
                Value = 40
            };

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

MinorTickFrequency

Step Frequency

When the SnapsTo property is set to StepValues, the StepFrequency property is used to specify the interval between snap points.

<editors:SfRangeSlider
                    Width="200"
                    VerticalAlignment="Center"
                    Maximum="100"
                    Minimum="0"
                    StepFrequency="20"
                    Value="40" />
Grid parentGrid = new Grid();
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {   
                Width = 200,
                Maximum = 100,
                Minimum = 0,
                StepFrequency = 20,
                Value = 40
            };

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

Snaps To

The SnapsTo property determines whether the SfRangeSlider snaps to steps or ticks. Available options for this property are

  1. StepValues
  2. Ticks

Default option is StepValues and StepFrequency property is used to specify the interval between snap points in this case. When the SnapsTo property is set to Ticks, the TickFrequency property is used to specify the interval between snap points.

Tick Placement

The TickPlacement property is used to determine where to draw tick marks in relation to the track. Available options for this property are

  1. BottomRight
  2. Inline
  3. None
  4. Outside
  5. TopLeft

The default option is Inline.

BottomRight

Tick marks are placed either below the track in horizontal orientation or right of the track in vertical orientation.

<editors:SfRangeSlider
                    Width="300"
                    Maximum="100"
                    Minimum="0"
                    TickFrequency="20"
                    TickPlacement="BottomRight"
                    Value="40" />
Grid parentGrid = new Grid();
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {
                Width = 200,
                Maximum = 100,
                Minimum = 0,
                TickFrequency = 20,
                TickPlacement = Syncfusion.Windows.Controls.Input.TickPlacement.BottomRight,
                Value = 40
            };

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

BottomRight

NOTE

In Vertical Orientation, this option places the ticks to right side.

TopLeft

Tick marks are placed either above the track in horizontal orientation or left of the track in vertical orientation.

<editors:SfRangeSlider
                    Width="300"
                    Maximum="100"
                    Minimum="0"
                    TickFrequency="20"
                    TickPlacement="TopLeft"
                    Value="40" />
Grid parentGrid = new Grid();
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {
                Width = 200,
                Maximum = 100,
                Minimum = 0,
                TickFrequency = 20,
                TickPlacement = Syncfusion.Windows.Controls.Input.TickPlacement.TopLeft,
                Value = 40
            };

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

TopLeft

NOTE

In Vertical Orientation, this option places the ticks to left side.

Outside

Tick marks are placed on both sides of the track either in horizontal or vertical orientation.

<editors:SfRangeSlider
                    Width="300"
                    Maximum="100"
                    Minimum="0"
                    TickFrequency="20"
                    TickPlacement="Outside"
                    Value="40" />
Grid parentGrid = new Grid();
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {
                Width = 200,
                Maximum = 100,
                Minimum = 0,
                TickFrequency = 20,
                TickPlacement = Syncfusion.Windows.Controls.Input.TickPlacement.Outside,
                Value = 40
            };

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

Outside

Inline

Ticks are placed inside the track.

<editors:SfRangeSlider
                    Width="300"
                    Maximum="100"
                    Minimum="0"
                    TickFrequency="20"
                    TickPlacement="Inline"
                    Value="40" />
Grid parentGrid = new Grid();
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {
                Width = 200,
                Maximum = 100,
                Minimum = 0,
                TickFrequency = 20,
                TickPlacement = Syncfusion.Windows.Controls.Input.TickPlacement.Inline,
                Value = 40
            };

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

Inline

None

No Tick mark appears.

<editors:SfRangeSlider
                    Width="300"
                    Maximum="100"
                    Minimum="0"
                    TickFrequency="20"
                    TickPlacement="None"
                    Value="40" />
Grid parentGrid = new Grid();
            SfRangeSlider rangeSlider = new SfRangeSlider()
            {
                Width = 200,
                Maximum = 100,
                Minimum = 0,
                TickFrequency = 20,
                TickPlacement = Syncfusion.Windows.Controls.Input.TickPlacement.None,
                Value = 40
            };

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

None