Class SliderTickStyle

Options to customize the slider major and minor ticks.

Inheritance

System.Object

SliderTickStyle

Namespace: Syncfusion.Maui.Sliders

Assembly: Syncfusion.Maui.Sliders.dll

Syntax

public class SliderTickStyle : BindableObject

Constructors

SliderTickStyle()

Declaration

public SliderTickStyle()

Fields

ActiveFillProperty

The backing store for the ActiveFill field.

Declaration

public static readonly BindableProperty ActiveFillProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	Microsoft.Maui.Controls.BindableProperty.

ActiveSizeProperty

The backing store for the ActiveSize field.

Declaration

public static readonly BindableProperty ActiveSizeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	Microsoft.Maui.Controls.BindableProperty.

InactiveFillProperty

The backing store for the InactiveFill field.

Declaration

public static readonly BindableProperty InactiveFillProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	Microsoft.Maui.Controls.BindableProperty.

InactiveSizeProperty

The backing store for the InactiveSize field.

Declaration

public static readonly BindableProperty InactiveSizeProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	Microsoft.Maui.Controls.BindableProperty.

OffsetProperty

The backing store for the Offset field.

Declaration

public static readonly BindableProperty OffsetProperty

Field Value

Type	Description
Microsoft.Maui.Controls.BindableProperty	Microsoft.Maui.Controls.BindableProperty.

Properties

ActiveFill

Gets or sets the brush for the active ticks in the SfSlider, SfRangeSlider, SfRangeSelector,
SfDateTimeSlider, SfDateTimeRangeSlider and SfDateTimeRangeSelector.

Declaration

public Brush ActiveFill { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	The default brush is SolidColorBrush(Color.FromRgb(158, 158, 158)).

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider ShowTicks = "True"
                  Interval = "0.2">
    <sliders:SfSlider.MajorTickStyle>
        <sliders:SliderTickStyle ActiveFill = "Orange" />
    </sliders:SfSlider.MajorTickStyle>
    <sliders:SfSlider.MinorTickStyle>
        <sliders:SliderTickStyle ActiveFill = "Red" />
    </sliders:SfSlider.MinorTickStyle>
</sliders:SfSlider>

SfSlider slider = new SfSlider()
{
    ShowTicks = true,
    Interval = 0.2
};
slider.MajorTickStyle.ActiveFill = new SolidColorBrush(Colors.Orange);
slider.MinorTickStyle.ActiveFill = new SolidColorBrush(Colors.Red);

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider ShowTicks = "True"
                          Interval = "0.2">
    <sliders:SfDateTimeSlider.MajorTickStyle>
        <sliders:SliderTickStyle ActiveFill = "Orange" />
    </sliders:SfDateTimeSlider.MajorTickStyle>
    <sliders:SfDateTimeSlider.MinorTickStyle>
        <sliders:SliderTickStyle ActiveFill = "Red" />
    </sliders:SfDateTimeSlider.MinorTickStyle>
</sliders:SfDateTimeSlider>

SfDateTimeSlider slider = new SfDateTimeSlider()
{
    ShowTicks = true,
    Interval = 0.2
};
slider.MajorTickStyle.ActiveFill = new SolidColorBrush(Colors.Orange);
slider.MinorTickStyle.ActiveFill = new SolidColorBrush(Colors.Red);

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider ShowTicks = "True"
                       Interval = "0.2">
    <sliders:SfRangeSlider.MajorTickStyle>
        <sliders:SliderTickStyle ActiveFill = "Orange" />
    </sliders:SfRangeSlider.MajorTickStyle>
    <sliders:SfSlider.MinorTickStyle>
        <sliders:SliderTickStyle ActiveFill = "Red" />
    </sliders:SfSlider.MinorTickStyle>
</sliders:SfRangeSlider>

SfRangeSlider rangeSlider = new SfRangeSlider()
{
    ShowTicks = true,
    Interval = 0.2
};
rangeSlider.MajorTickStyle.ActiveFill = new SolidColorBrush(Colors.Orange);
rangeSlider.MinorTickStyle.ActiveFill = new SolidColorBrush(Colors.Red);

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider ShowTicks = "True"
                               Interval = "0.2">
    <sliders:SfDateTimeRangeSlider.MajorTickStyle>
        <sliders:SliderTickStyle ActiveFill = "Orange" />
    </sliders:SfDateTimeRangeSlider.MajorTickStyle>
    <sliders:SfDateTimeRangeSlider.MinorTickStyle>
        <sliders:SliderTickStyle ActiveFill = "Red" />
    </sliders:SfDateTimeRangeSlider.MinorTickStyle>
</sliders:SfDateTimeRangeSlider>

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider()
{
    ShowTicks = true,
    Interval = 0.2
};
rangeSlider.MajorTickStyle.ActiveFill = new SolidColorBrush(Colors.Orange);
rangeSlider.MinorTickStyle.ActiveFill = new SolidColorBrush(Colors.Red);

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector ShowTicks="True"
                         Interval="0.2">
    <sliders:SfRangeSelector.MajorTickStyle>
        <sliders:SliderTickStyle ActiveFill="Orange" />
    </sliders:SfRangeSelector.MajorTickStyle>
    <sliders:SfRangeSelector.MinorTickStyle>
        <sliders:SliderTickStyle ActiveFill="Red" />
    </sliders:SfRangeSelector.MinorTickStyle>
</sliders:SfRangeSelector>

SfRangeSelector rangeSelector = new SfRangeSelector()
{
    ShowTicks = true, 
    Interval = 0.2
};
rangeSelector.MajorTickStyle.ActiveFill = new SolidColorBrush(Colors.Orange);
rangeSelector.MinorTickStyle.ActiveFill = new SolidColorBrush(Colors.Red);

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector ShowTicks="True"
                                 Interval="0.2">
    <sliders:SfDateTimeRangeSelector.MajorTickStyle>
        <sliders:SliderTickStyle ActiveFill="Orange" />
    </sliders:SfDateTimeRangeSelector.MajorTickStyle>
    <sliders:SfDateTimeRangeSelector.MinorTickStyle>
        <sliders:SliderTickStyle ActiveFill="Red" />
    </sliders:SfDateTimeRangeSelector.MinorTickStyle>
</sliders:SfDateTimeRangeSelector>

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
{
    ShowTicks = true, 
    Interval = 0.2
};
rangeSelector.MajorTickStyle.ActiveFill = new SolidColorBrush(Colors.Orange);
rangeSelector.MinorTickStyle.ActiveFill = new SolidColorBrush(Colors.Red);

ActiveSize

Gets or sets the size for the active ticks in the SfSlider, SfRangeSlider, SfRangeSelector,
SfDateTimeSlider, SfDateTimeRangeSlider and SfDateTimeRangeSelector. When Orientation is horizontal, the size will be considered as it is. But, when Orientation is vertical, the width will be considered as height and the height will be considered as width of the ticks when rendering. This is applicable for both major and minor ticks.

Declaration

public Size ActiveSize { get; set; }

Property Value

Type	Description
Microsoft.Maui.Graphics.Size	The default size is Size(1,8).

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider ShowTicks = "True"
                  Interval = "0.2">
    <sliders:SfSlider.MajorTickStyle>
        <sliders:SliderTickStyle ActiveSize = "2,15" />
    </sliders:SfSlider.MajorTickStyle>
    <sliders:SfSlider.MinorTickStyle>
        <sliders:SliderTickStyle ActiveSize = "2,10" />
    </sliders:SfSlider.MinorTickStyle>
</sliders:SfSlider>

SfSlider slider = new SfSlider()
{
    ShowTicks = true,
    Interval = 0.2
};
slider.MajorTickStyle.ActiveSize = new Size(2, 15);
slider.MinorTickStyle.ActiveSize = new Size(2, 10);

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider ShowTicks = "True"
                                      Interval = "0.2">
    <sliders:SfDateTimeSlider.MajorTickStyle>
        <sliders:SliderTickStyle ActiveSize = "2,15" />
    </sliders:SfDateTimeSlider.MajorTickStyle>
    <sliders:SfSlSfDateTimeSliderider.MinorTickStyle>
        <sliders:SliderTickStyle ActiveSize = "2,10" />
    </sliders:SfDateTimeSlider.MinorTickStyle>
</sliders:SfDateTimeSlider>

SfDateTimeSlider slider = new SfDateTimeSlider()
{
    ShowTicks = true,
    Interval = 0.2
};
slider.MajorTickStyle.ActiveSize = new Size(2, 15);
slider.MinorTickStyle.ActiveSize = new Size(2, 10);

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider ShowTicks = "True"
                       Interval = "0.2">
    <sliders:SfRangeSlider.MajorTickStyle>
        <sliders:SliderTickStyle ActiveSize = "2,15" />
    </sliders:SfRangeSlider.MajorTickStyle>
    <sliders:SfSlider.MinorTickStyle>
        <sliders:SliderTickStyle ActiveSize = "2,10" />
    </sliders:SfSlider.MinorTickStyle>
</sliders:SfRangeSlider>

SfRangeSlider rangeSlider = new SfRangeSlider()
{
    ShowTicks = true,
    Interval = 0.2
};
rangeSlider.MajorTickStyle.ActiveSize = new Size(2, 15);
rangeSlider.MinorTickStyle.ActiveSize = new Size(2, 10);

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider ShowTicks = "True"
                                           Interval = "0.2">
    <sliders:SfDateTimeRangeSlider.MajorTickStyle>
        <sliders:SliderTickStyle ActiveSize = "2,15" />
    </sliders:SfDateTimeRangeSlider.MajorTickStyle>
    <sliders:SfDateTimeRangeSlider.MinorTickStyle>
        <sliders:SliderTickStyle ActiveSize = "2,10" />
    </sliders:SfDateTimeRangeSlider.MinorTickStyle>
</sliders:SfDateTimeRangeSlider>

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider()
{
    ShowTicks = true,
    Interval = 0.2
};
rangeSlider.MajorTickStyle.ActiveSize = new Size(2, 15);
rangeSlider.MinorTickStyle.ActiveSize = new Size(2, 10);

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector ShowTicks="True"
                         Interval="0.2">
    <sliders:SfRangeSelector.MajorTickStyle>
        <sliders:SliderTickStyle ActiveSize="2,15" />
    </sliders:SfRangeSelector.MajorTickStyle>
    <sliders:SfRangeSelector.MinorTickStyle>
        <sliders:SliderTickStyle ActiveSize="2,10" />
    </sliders:SfRangeSelector.MinorTickStyle>
</sliders:SfRangeSelector>

SfRangeSelector rangeSelector = new SfRangeSelector()
{
    ShowTicks = true, 
    Interval = 0.2
};
rangeSelector.MajorTickStyle.ActiveSize = new Size(2, 15);
rangeSelector.MinorTickStyle.ActiveSize = new Size(2, 10);

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector ShowTicks="True"
                                 Interval="0.2">
    <sliders:SfDateTimeRangeSelector.MajorTickStyle>
        <sliders:SliderTickStyle ActiveSize="2,15" />
    </sliders:SfDateTimeRangeSelector.MajorTickStyle>
    <sliders:SfDateTimeRangeSelector.MinorTickStyle>
        <sliders:SliderTickStyle ActiveSize="2,10" />
    </sliders:SfDateTimeRangeSelector.MinorTickStyle>
</sliders:SfDateTimeRangeSelector>

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
{
    ShowTicks = true, 
    Interval = 0.2
};
rangeSelector.MajorTickStyle.ActiveSize = new Size(2, 15);
rangeSelector.MinorTickStyle.ActiveSize = new Size(2, 10);

InactiveFill

Gets or sets the brush for the inactive ticks in the SfSlider, SfRangeSlider, SfRangeSelector,
SfDateTimeSlider, SfDateTimeRangeSlider and SfDateTimeRangeSelector.

Declaration

public Brush InactiveFill { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	The default brush is SolidColorBrush(Color.FromRgb(158, 158, 158)).

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider ShowTicks = "True"
                  Interval = "0.2">
    <sliders:SfSlider.MajorTickStyle>
        <sliders:SliderTickStyle InactiveFill = "Orange" />
    </sliders:SfSlider.MajorTickStyle>
    <sliders:SfSlider.MinorTickStyle>
        <sliders:SliderTickStyle InactiveFill = "Red" />
    </sliders:SfSlider.MinorTickStyle>
</sliders:SfSlider>

SfSlider slider = new SfSlider()
{
    ShowTicks = true,
    Interval = 0.2
};
slider.MajorTickStyle.InactiveFill = new SolidColorBrush(Colors.Orange);
slider.MinorTickStyle.InactiveFill = new SolidColorBrush(Colors.Red);

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider ShowTicks = "True"
                          Interval = "0.2">
    <sliders:SfDateTimeSlider.MajorTickStyle>
        <sliders:SliderTickStyle InactiveFill = "Orange" />
    </sliders:SfDateTimeSlider.MajorTickStyle>
    <sliders:SfDateTimeSlider.MinorTickStyle>
        <sliders:SliderTickStyle InactiveFill = "Red" />
    </sliders:SfDateTimeSlider.MinorTickStyle>
</sliders:SfDateTimeSlider>

SfDateTimeSlider slider = new SfDateTimeSlider()
{
    ShowTicks = true,
    Interval = 0.2
};
slider.MajorTickStyle.InactiveFill = new SolidColorBrush(Colors.Orange);
slider.MinorTickStyle.InactiveFill = new SolidColorBrush(Colors.Red);

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider ShowTicks = "True"
                       Interval = "0.2">
    <sliders:SfRangeSlider.MajorTickStyle>
        <sliders:SliderTickStyle InactiveFill = "Orange" />
    </sliders:SfRangeSlider.MajorTickStyle>
    <sliders:SfSlider.MinorTickStyle>
        <sliders:SliderTickStyle InactiveFill = "Red" />
    </sliders:SfSlider.MinorTickStyle>
</sliders:SfRangeSlider>

SfRangeSlider rangeSlider = new SfRangeSlider()
{
    ShowTicks = true,
    Interval = 0.2
};
rangeSlider.MajorTickStyle.InactiveFill = new SolidColorBrush(Colors.Orange);
rangeSlider.MinorTickStyle.InactiveFill = new SolidColorBrush(Colors.Red);

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider ShowTicks = "True"
                               Interval = "0.2">
    <sliders:SfDateTimeRangeSlider.MajorTickStyle>
        <sliders:SliderTickStyle InactiveFill = "Orange" />
    </sliders:SfDateTimeRangeSlider.MajorTickStyle>
    <sliders:SfDateTimeRangeSlider.MinorTickStyle>
        <sliders:SliderTickStyle InactiveFill = "Red" />
    </sliders:SfDateTimeRangeSlider.MinorTickStyle>
</sliders:SfDateTimeRangeSlider>

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider()
{
    ShowTicks = true,
    Interval = 0.2
};
rangeSlider.MajorTickStyle.InactiveFill = new SolidColorBrush(Colors.Orange);
rangeSlider.MinorTickStyle.InactiveFill = new SolidColorBrush(Colors.Red);

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector ShowTicks="True"
                         Interval="0.2">
    <sliders:SfRangeSelector.MajorTickStyle>
        <sliders:SliderTickStyle InactiveFill="Orange" />
    </sliders:SfRangeSelector.MajorTickStyle>
    <sliders:SfRangeSelector.MinorTickStyle>
        <sliders:SliderTickStyle InactiveFill="Red" />
    </sliders:SfRangeSelector.MinorTickStyle>
</sliders:SfRangeSelector>

SfRangeSelector rangeSelector = new SfRangeSelector()
{
    ShowTicks = true, 
    Interval = 0.2
};
rangeSelector.MajorTickStyle.InactiveFill = new SolidColorBrush(Colors.Orange);
rangeSelector.MinorTickStyle.InactiveFill = new SolidColorBrush(Colors.Red);

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector ShowTicks="True"
                                 Interval="0.2">
    <sliders:SfDateTimeRangeSelector.MajorTickStyle>
        <sliders:SliderTickStyle InactiveFill="Orange" />
    </sliders:SfDateTimeRangeSelector.MajorTickStyle>
    <sliders:SfDateTimeRangeSelector.MinorTickStyle>
        <sliders:SliderTickStyle InactiveFill="Red" />
    </sliders:SfDateTimeRangeSelector.MinorTickStyle>
</sliders:SfDateTimeRangeSelector>

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
{
    ShowTicks = true, 
    Interval = 0.2
};
rangeSelector.MajorTickStyle.InactiveFill = new SolidColorBrush(Colors.Orange);
rangeSelector.MinorTickStyle.InactiveFill = new SolidColorBrush(Colors.Red);

InactiveSize

Gets or sets the size for the inactive ticks in the SfSlider, SfRangeSlider, SfRangeSelector,
SfDateTimeSlider, SfDateTimeRangeSlider and SfDateTimeRangeSelector. When Orientation is horizontal, the size will be considered as it is. But, when Orientation is vertical, the width will be considered as height and the height will be considered as width of the ticks when rendering. This is applicable for both major and minor ticks.

Declaration

public Size InactiveSize { get; set; }

Property Value

Type	Description
Microsoft.Maui.Graphics.Size	The default size is Size(1,8).

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider ShowTicks = "True"
                  Interval = "0.2">
    <sliders:SfSlider.MajorTickStyle>
        <sliders:SliderTickStyle InactiveSize = "2,15" />
    </sliders:SfSlider.MajorTickStyle>
    <sliders:SfSlider.MinorTickStyle>
        <sliders:SliderTickStyle InactiveSize = "2,10" />
    </sliders:SfSlider.MinorTickStyle>
</sliders:SfSlider>

SfSlider slider = new SfSlider()
{
    ShowTicks = true,
    Interval = 0.2
};
slider.MajorTickStyle.InactiveSize = new Size(2, 15);
slider.MinorTickStyle.InactiveSize = new Size(2, 10);

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider ShowTicks = "True"
                          Interval = "0.2">
    <sliders:SfDateTimeSlider.MajorTickStyle>
        <sliders:SliderTickStyle InactiveSize = "2,15" />
    </sliders:SfDateTimeSlider.MajorTickStyle>
    <sliders:SfDateTimeSlider.MinorTickStyle>
        <sliders:SliderTickStyle InactiveSize = "2,10" />
    </sliders:SfDateTimeSlider.MinorTickStyle>
</sliders:SfDateTimeSlider>

SfDateTimeSlider slider = new SfDateTimeSlider()
{
    ShowTicks = true,
    Interval = 0.2
};
slider.MajorTickStyle.InactiveSize = new Size(2, 15);
slider.MinorTickStyle.InactiveSize = new Size(2, 10);

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider ShowTicks = "True"
                       Interval = "0.2">
    <sliders:SfRangeSlider.MajorTickStyle>
        <sliders:SliderTickStyle InactiveSize = "2,15" />
    </sliders:SfRangeSlider.MajorTickStyle>
    <sliders:SfSlider.MinorTickStyle>
        <sliders:SliderTickStyle InactiveSize = "2,10" />
    </sliders:SfSlider.MinorTickStyle>
</sliders:SfRangeSlider>

SfRangeSlider rangeSlider = new SfRangeSlider()
{
    ShowTicks = true,
    Interval = 0.2
};
rangeSlider.MajorTickStyle.InactiveSize = new Size(2, 15);
rangeSlider.MinorTickStyle.InactiveSize = new Size(2, 10);

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider ShowTicks = "True"
                               Interval = "0.2">
    <sliders:SfDateTimeRangeSlider.MajorTickStyle>
        <sliders:SliderTickStyle InactiveSize = "2,15" />
    </sliders:SfDateTimeRangeSlider.MajorTickStyle>
    <sliders:SfDateTimeRangeSlider.MinorTickStyle>
        <sliders:SliderTickStyle InactiveSize = "2,10" />
    </sliders:SfDateTimeRangeSlider.MinorTickStyle>
</sliders:SfDateTimeRangeSlider>

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider()
{
    ShowTicks = true,
    Interval = 0.2
};
rangeSlider.MajorTickStyle.InactiveSize = new Size(2, 15);
rangeSlider.MinorTickStyle.InactiveSize = new Size(2, 10);

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector ShowTicks="True"
                         Interval="0.2">
    <sliders:SfRangeSelector.MajorTickStyle>
        <sliders:SliderTickStyle InactiveSize="2,15" />
    </sliders:SfRangeSelector.MajorTickStyle>
    <sliders:SfRangeSelector.MinorTickStyle>
        <sliders:SliderTickStyle InactiveSize="2,10" />
    </sliders:SfRangeSelector.MinorTickStyle>
</sliders:SfRangeSelector>

SfRangeSelector rangeSelector = new SfRangeSelector()
{
    ShowTicks = true, 
    Interval = 0.2
};
rangeSelector.MajorTickStyle.InactiveSize = new Size(2, 15);
rangeSelector.MinorTickStyle.InactiveSize = new Size(2, 10);

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector ShowTicks="True"
                                 Interval="0.2">
    <sliders:SfDateTimeRangeSelector.MajorTickStyle>
        <sliders:SliderTickStyle InactiveSize="2,15" />
    </sliders:SfDateTimeRangeSelector.MajorTickStyle>
    <sliders:SfDateTimeRangeSelector.MinorTickStyle>
        <sliders:SliderTickStyle InactiveSize="2,10" />
    </sliders:SfDateTimeRangeSelector.MinorTickStyle>
</sliders:SfDateTimeRangeSelector>

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
{
    ShowTicks = true, 
    Interval = 0.2
};
rangeSelector.MajorTickStyle.InactiveSize = new Size(2, 15);
rangeSelector.MinorTickStyle.InactiveSize = new Size(2, 10);

Offset

Gets or sets the offset for the ticks in the SfSlider, SfRangeSlider, SfRangeSelector,
SfDateTimeSlider, SfDateTimeRangeSlider and SfDateTimeRangeSelector. When Orientation is horizontal, the Point.Y will be added with the given offset and then rendered. When Orientation is vertical, the Point.X will be added with the given offset and then rendered.

Declaration

public double Offset { get; set; }

Property Value

Type	Description
System.Double	The default offset is 0.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider ShowTicks = "True"          
                  Interval = "0.2">
    <sliders:SfSlider.MajorTickStyle>
        <sliders:SliderTickStyle Offset = "6" />            
    </sliders:SfSlider.MajorTickStyle>            
    <sliders:SfSlider.MinorTickStyle>            
        <sliders:SliderTickStyle Offset = "5" />            
    </sliders:SfSlider.MinorTickStyle>            
</sliders:SfSlider>

SfSlider slider = new SfSlider()
{
   ShowTicks = true,
   Interval = 0.2
};
slider.MajorTickStyle.Offset = 6;
slider.MinorTickStyle.Offset = 5;

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider ShowTicks = "True"          
                          Interval = "0.2">
    <sliders:SfDateTimeSlider.MajorTickStyle>
        <sliders:SliderTickStyle Offset = "6" />            
    </sliders:SfDateTimeSlider.MajorTickStyle>            
    <sliders:SfDateTimeSlider.MinorTickStyle>            
        <sliders:SliderTickStyle Offset = "5" />            
    </sliders:SfDateTimeSlider.MinorTickStyle>            
</sliders:SfDateTimeSlider>

SfDateTimeSlider slider = new SfDateTimeSlider()
{
   ShowTicks = true,
   Interval = 0.2
};
slider.MajorTickStyle.Offset = 6;
slider.MinorTickStyle.Offset = 5;

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider ShowTicks = "True"
                       Interval = "0.2">
    <sliders:SfRangeSlider.MajorTickStyle>
        <sliders:SliderTickStyle Offset = "6" />
    </sliders:SfRangeSlider.MajorTickStyle>
    <sliders:SfSlider.MinorTickStyle>
        <sliders:SliderTickStyle Offset = "5" />
    </sliders:SfSlider.MinorTickStyle>
</sliders:SfRangeSlider>

SfRangeSlider rangeSlider = new SfRangeSlider()
{
    ShowTicks = true,
    Interval = 0.2
};
rangeSlider.MajorTickStyle.Offset = 6;
rangeSlider.MinorTickStyle.Offset = 5;

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider ShowTicks = "True"
                               Interval = "0.2">
    <sliders:SfDateTimeRangeSlider.MajorTickStyle>
        <sliders:SliderTickStyle Offset = "6" />
    </sliders:SfDateTimeRangeSlider.MajorTickStyle>
    <sliders:SfDateTimeRangeSlider.MinorTickStyle>
        <sliders:SliderTickStyle Offset = "5" />
    </sliders:SfDateTimeRangeSlider.MinorTickStyle>
</sliders:SfDateTimeRangeSlider>

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider()
{
    ShowTicks = true,
    Interval = 0.2
};
rangeSlider.MajorTickStyle.Offset = 6;
rangeSlider.MinorTickStyle.Offset = 5;

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector ShowTicks="True"
                         Interval="0.2">
    <sliders:SfRangeSelector.MajorTickStyle>
        <sliders:SliderTickStyle Offset="6" />
    </sliders:SfRangeSelector.MajorTickStyle>
    <sliders:SfRangeSelector.MinorTickStyle>
        <sliders:SliderTickStyle Offset="5" />
    </sliders:SfRangeSelector.MinorTickStyle>
</sliders:SfRangeSelector>

SfRangeSelector rangeSelector = new SfRangeSelector()
{
    ShowTicks = true, 
    Interval = 0.2
};
rangeSelector.MajorTickStyle.Offset = 6;
rangeSelector.MinorTickStyle.Offset = 5;

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector ShowTicks="True"
                                 Interval="0.2">
    <sliders:SfDateTimeRangeSelector.MajorTickStyle>
        <sliders:SliderTickStyle Offset="6" />
    </sliders:SfDateTimeRangeSelector.MajorTickStyle>
    <sliders:SfDateTimeRangeSelector.MinorTickStyle>
        <sliders:SliderTickStyle Offset="5" />
    </sliders:SfDateTimeRangeSelector.MinorTickStyle>
</sliders:SfDateTimeRangeSelector>

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
{
    ShowTicks = true, 
    Interval = 0.2
};
rangeSelector.MajorTickStyle.Offset = 6;
rangeSelector.MinorTickStyle.Offset = 5;