Class SliderTrackStyle

Options to customize the slider track.

Inheritance

System.Object

SliderTrackStyle

Namespace: Syncfusion.Maui.Sliders

Assembly: Syncfusion.Maui.Sliders.dll

Syntax

public class SliderTrackStyle : Element, IThemeElement

Constructors

SliderTrackStyle()

Initializes a new instance of the SliderTrackStyle class.

Declaration

public SliderTrackStyle()

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.

Properties

ActiveFill

Gets or sets the brush for the active track 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(81, 43, 212))`.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider>
    <sliders:SfSlider.TrackStyle>
        <sliders:SliderTrackStyle ActiveFill = "Red" />
    </sliders:SfSlider.TrackStyle>
</sliders:SfSlider>

SfSlider slider = new SfSlider();
slider.TrackStyle.ActiveFill = new SolidColorBrush(Colors.Red);

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider>
    <sliders:SfDateTimeSlider.TrackStyle>
        <sliders:SliderTrackStyle ActiveFill = "Red" />
    </sliders:SfDateTimeSlider.TrackStyle>
</sliders:SfDateTimeSlider>

SfDateTimeSlider slider = new SfDateTimeSlider();
slider.TrackStyle.ActiveFill = new SolidColorBrush(Colors.Red);

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider>
    <sliders:SfRangeSlider.TrackStyle>
        <sliders:SliderTrackStyle ActiveFill = "Red" />
    </sliders:SfRangeSlider.TrackStyle>
</sliders:SfRangeSlider>

SfRangeSlider rangeSlider = new SfRangeSlider();
rangeSlider.TrackStyle.ActiveFill = new SolidColorBrush(Colors.Red);

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider>
    <sliders:SfDateTimeRangeSlider.TrackStyle>
        <sliders:SliderTrackStyle ActiveFill = "Red" />
    </sliders:SfDateTimeRangeSlider.TrackStyle>
</sliders:SfDateTimeRangeSlider>

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider();
rangeSlider.TrackStyle.ActiveFill = new SolidColorBrush(Colors.Red);

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector>
    <sliders:SfRangeSelector.TrackStyle>
        <sliders:SliderTrackStyle ActiveFill="Red" />                                      
    </sliders:SfRangeSelector.TrackStyle>
</sliders:SfRangeSelector>

SfRangeSelector rangeSelector = new SfRangeSelector();
rangeSelector.TrackStyle.ActiveFill = new SolidColorBrush(Colors.Red);

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector>
    <sliders:SfDateTimeRangeSelector.TrackStyle>
        <sliders:SliderTrackStyle ActiveFill="Red" />                                      
    </sliders:SfDateTimeRangeSelector.TrackStyle>
</sliders:SfDateTimeRangeSelector>

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector();
rangeSelector.TrackStyle.ActiveFill = new SolidColorBrush(Colors.Red);

ActiveSize

Gets or sets the size for the active track in the SfSlider, SfRangeSlider, SfRangeSelector,
SfDateTimeSlider, SfDateTimeRangeSlider and SfDateTimeRangeSelector. When Orientation is horizontal, it will be considered as height of the track and when Orientation is vertical, it will be considered as width of the track.

Declaration

public double ActiveSize { get; set; }

Property Value

Type	Description
System.Double	The default size is `6.0`.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider>
    <sliders:SfSlider.TrackStyle>
        <sliders:SliderTrackStyle ActiveSize = "10" />
    </sliders:SfSlider.TrackStyle>
</sliders:SfSlider>

SfSlider slider = new SfSlider();
slider.TrackStyle.ActiveSize = 10;

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider>
    <sliders:SfDateTimeSlider.TrackStyle>
        <sliders:SliderTrackStyle ActiveSize = "10" />
    </sliders:SfDateTimeSlider.TrackStyle>
</sliders:SfDateTimeSlider>

SfDateTimeSlider slider = new SfDateTimeSlider();
slider.TrackStyle.ActiveSize = 10;

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider>
    <sliders:SfRangeSlider.TrackStyle>
        <sliders:SliderTrackStyle ActiveSize = "10" />
    </sliders:SfRangeSlider.TrackStyle>
</sliders:SfRangeSlider>

SfRangeSlider rangeSlider = new SfRangeSlider();
rangeSlider.TrackStyle.ActiveSize = 10;

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider>
    <sliders:SfDateTimeRangeSlider.TrackStyle>
        <sliders:SliderTrackStyle ActiveSize = "10" />
    </sliders:SfDateTimeRangeSlider.TrackStyle>
</sliders:SfDateTimeRangeSlider>

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider();
rangeSlider.TrackStyle.ActiveSize = 10;

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector>
    <sliders:SfRangeSelector.TrackStyle>
        <sliders:SliderTrackStyle ActiveSize="10" />                                      
    </sliders:SfRangeSelector.TrackStyle>
</sliders:SfRangeSelector>

SfRangeSelector rangeSelector = new SfRangeSelector();
rangeSelector.TrackStyle.ActiveSize = 10;

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector>
    <sliders:SfDateTimeRangeSelector.TrackStyle>
        <sliders:SliderTrackStyle ActiveSize="10" />                                      
    </sliders:SfDateTimeRangeSelector.TrackStyle>
</sliders:SfDateTimeRangeSelector>

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector();
rangeSelector.TrackStyle.ActiveSize = 10;

InactiveFill

Gets or sets the brush for the inactive track 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.FromRgba(81, 43, 212, 61))`.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider>
    <sliders:SfSlider.TrackStyle>
        <sliders:SliderTrackStyle InactiveFill = "Red" />
    </sliders:SfSlider.TrackStyle>
</sliders:SfSlider>

SfSlider slider = new SfSlider();
slider.TrackStyle.InactiveFill = new SolidColorBrush(Colors.Red);

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider>
    <sliders:SfDateTimeSlider.TrackStyle>
        <sliders:SliderTrackStyle InactiveFill = "Red" />
    </sliders:SfDateTimeSlider.TrackStyle>
</sliders:SfDateTimeSlider>

SfDateTimeSlider slider = new SfDateTimeSlider();
slider.TrackStyle.InactiveFill = new SolidColorBrush(Colors.Red);

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider>
    <sliders:SfRangeSlider.TrackStyle>
        <sliders:SliderTrackStyle InactiveFill = "Red" />
    </sliders:SfRangeSlider.TrackStyle>
</sliders:SfRangeSlider>

SfRangeSlider rangeSlider = new SfRangeSlider();
rangeSlider.TrackStyle.InactiveFill = new SolidColorBrush(Colors.Red);

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider>
    <sliders:SfDateTimeRangeSlider.TrackStyle>
        <sliders:SliderTrackStyle InactiveFill = "Red" />
    </sliders:SfDateTimeRangeSlider.TrackStyle>
</sliders:SfDateTimeRangeSlider>

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider();
rangeSlider.TrackStyle.InactiveFill = new SolidColorBrush(Colors.Red);

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector>
    <sliders:SfRangeSelector.TrackStyle>
        <sliders:SliderTrackStyle InactiveFill="Red" />                                      
    </sliders:SfRangeSelector.TrackStyle>
</sliders:SfRangeSelector>

SfRangeSelector rangeSelector = new SfRangeSelector();
rangeSelector.TrackStyle.InactiveFill = new SolidColorBrush(Colors.Orange);

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector>
    <sliders:SfDateTimeRangeSelector.TrackStyle>
        <sliders:SliderTrackStyle InactiveFill="Red" />                                      
    </sliders:SfDateTimeRangeSelector.TrackStyle>
</sliders:SfDateTimeRangeSelector>

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector();
rangeSelector.TrackStyle.InactiveFill = new SolidColorBrush(Colors.Orange);

InactiveSize

Gets or sets the size for the inactive track in the SfSlider, SfRangeSlider, SfRangeSelector,
SfDateTimeSlider, SfDateTimeRangeSlider and SfDateTimeRangeSelector. When Orientation is horizontal, it will be considered as height of the track and when Orientation is vertical, it will be considered as width of the track.

Declaration

public double InactiveSize { get; set; }

Property Value

Type	Description
System.Double	The default size is `4.0`.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider>
    <sliders:SfSlider.TrackStyle>
        <sliders:SliderTrackStyle InactiveSize = "10" />
    </sliders:SfSlider.TrackStyle>
</sliders:SfSlider>

SfSlider slider = new SfSlider();
slider.TrackStyle.InactiveSize = 10;

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider>
    <sliders:SfDateTimeSlider.TrackStyle>
        <sliders:SliderTrackStyle InactiveSize = "10" />
    </sliders:SfDateTimeSlider.TrackStyle>
</sliders:SfDateTimeSlider>

SfDateTimeSlider slider = new SfDateTimeSlider();
slider.TrackStyle.InactiveSize = 10;

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider>
    <sliders:SfRangeSlider.TrackStyle>
        <sliders:SliderTrackStyle InactiveSize = "10" />
    </sliders:SfRangeSlider.TrackStyle>
</sliders:SfRangeSlider>

SfRangeSlider rangeSlider = new SfRangeSlider();
rangeSlider.TrackStyle.InactiveSize = 10;

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider>
    <sliders:SfDateTimeRangeSlider.TrackStyle>
        <sliders:SliderTrackStyle InactiveSize = "10" />
    </sliders:SfDateTimeRangeSlider.TrackStyle>
</sliders:SfDateTimeRangeSlider>

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider();
rangeSlider.TrackStyle.InactiveSize = 10;

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector>
    <sliders:SfRangeSelector.TrackStyle>
        <sliders:SliderTrackStyle InactiveSize="10" />                                      
    </sliders:SfRangeSelector.TrackStyle>
</sliders:SfRangeSelector>

SfRangeSelector rangeSelector = new SfRangeSelector();
rangeSelector.TrackStyle.InactiveSize = 10;

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector>
    <sliders:SfDateTimeRangeSelector.TrackStyle>
        <sliders:SliderTrackStyle InactiveSize="10" />                                      
    </sliders:SfDateTimeRangeSelector.TrackStyle>
</sliders:SfDateTimeRangeSelector>

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector();
rangeSelector.TrackStyle.InactiveSize = 10;