Class SliderThumbStyle

Options to customize the slider thumbs.

Inheritance

System.Object

SliderThumbStyle

Namespace: Syncfusion.Maui.Sliders

Assembly: Syncfusion.Maui.Sliders.dll

Syntax

public class SliderThumbStyle : Element, IThemeElement

Constructors

SliderThumbStyle()

Declaration

public SliderThumbStyle()

Fields

FillProperty

The backing store for the Fill field.

Declaration

public static readonly BindableProperty FillProperty

Field Value

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

OverlapStrokeProperty

The backing store for the OverlapStroke field.

Declaration

public static readonly BindableProperty OverlapStrokeProperty

Field Value

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

RadiusProperty

The backing store for the Radius field.

Declaration

public static readonly BindableProperty RadiusProperty

Field Value

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

StrokeProperty

The backing store for the Stroke field.

Declaration

public static readonly BindableProperty StrokeProperty

Field Value

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

StrokeThicknessProperty

The backing store for the StrokeThickness field.

Declaration

public static readonly BindableProperty StrokeThicknessProperty

Field Value

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

Properties

Fill

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

Declaration

public Brush Fill { 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.ThumbStyle>
        <sliders:SliderThumbStyle Fill = "#F7C8DB" />
    </sliders:SfSlider.ThumbStyle>
</sliders:SfSlider>

SfSlider slider = new SfSlider();
slider.ThumbStyle.Fill = new SolidColorBrush(Color.FromArgb("#F7C8DB"));

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider>
    <sliders:SfDateTimeSlider.ThumbStyle>
        <sliders:SliderThumbStyle Fill = "#F7C8DB" />
    </sliders:SfDateTimeSlider.ThumbStyle>
</sliders:SfDateTimeSlider>

SfDateTimeSlider slider = new SfDateTimeSlider();
slider.ThumbStyle.Fill = new SolidColorBrush(Color.FromArgb("#F7C8DB"));

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider>
    <sliders:SfRangeSlider.ThumbStyle>
        <sliders:SliderThumbStyle Fill = "#F7C8DB" />
    </sliders:SfRangeSlider.ThumbStyle>
</sliders:SfRangeSlider>

SfRangeSlider rangeSlider = new SfRangeSlider();
rangeSlider.ThumbStyle.Fill = new SolidColorBrush(Color.FromArgb("#F7C8DB"));

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider>
    <sliders:SfDateTimeRangeSlider.ThumbStyle>
        <sliders:SliderThumbStyle Fill = "#F7C8DB" />
    </sliders:SfDateTimeRangeSlider.ThumbStyle>
</sliders:SfDateTimeRangeSlider>

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider();
rangeSlider.ThumbStyle.Fill = new SolidColorBrush(Color.FromArgb("#F7C8DB"));

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector>
    <sliders:SfRangeSelector.ThumbStyle>
        <sliders:SliderThumbStyle Fill="#F7C8DB" />
    </sliders:SfRangeSelector.ThumbStyle>
</sliders:SfRangeSelector>

SfRangeSelector rangeSelector = new SfRangeSelector();
rangeSelector.ThumbStyle.Fill = new SolidColorBrush(Color.FromArgb("#F7C8DB"));

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector>
    <sliders:SfDateTimeRangeSelector.ThumbStyle>
        <sliders:SliderThumbStyle Fill="#F7C8DB" />
    </sliders:SfDateTimeRangeSelector.ThumbStyle>
</sliders:SfDateTimeRangeSelector>

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector();
rangeSelector.ThumbStyle.Fill = new SolidColorBrush(Color.FromArgb("#F7C8DB"));

OverlapStroke

Gets or sets the brush for the thumbs stroke when they overlap each other.

Declaration

public Brush OverlapStroke { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	The default brush is `SolidColorBrush(Colors.White))`.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider>
    <sliders:SfSlider.ThumbStyle>
        <sliders:SliderThumbStyle OverlapStroke = "#F7C8DB" />
    </sliders:SfSlider.ThumbStyle>
</sliders:SfSlider>

SfSlider slider = new SfSlider();
slider.ThumbStyle.OverlapStroke = new SolidColorBrush(Color.FromArgb("#F7C8DB"));

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider>
    <sliders:SfDateTimeSlider.ThumbStyle>
        <sliders:SliderThumbStyle OverlapStroke = "#F7C8DB" />
    </sliders:SfDateTimeSlider.ThumbStyle>
</sliders:SfDateTimeSlider>

SfDateTimeSlider slider = new SfDateTimeSlider();
slider.ThumbStyle.OverlapStroke = new SolidColorBrush(Color.FromArgb("#F7C8DB"));

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider>
    <sliders:SfRangeSlider.ThumbStyle>
        <sliders:SliderThumbStyle OverlapStroke = "#F7C8DB" />
    </sliders:SfRangeSlider.ThumbStyle>
</sliders:SfRangeSlider>

SfRangeSlider rangeSlider = new SfRangeSlider();
rangeSlider.ThumbStyle.OverlapStroke = new SolidColorBrush(Color.FromArgb("#F7C8DB"));

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider>
    <sliders:SfDateTimeRangeSlider.ThumbStyle>
        <sliders:SliderThumbStyle OverlapStroke = "#F7C8DB" />
    </sliders:SfDateTimeRangeSlider.ThumbStyle>
</sliders:SfDateTimeRangeSlider>

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider();
rangeSlider.ThumbStyle.OverlapStroke = new SolidColorBrush(Color.FromArgb("#F7C8DB"));

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector>
    <sliders:SfRangeSelector.ThumbStyle>
        <sliders:SliderThumbStyle OverlapStroke="#F7C8DB" />
    </sliders:SfRangeSelector.ThumbStyle>
</sliders:SfRangeSelector>

SfRangeSelector rangeSelector = new SfRangeSelector();
rangeSelector.ThumbStyle.OverlapStroke = new SolidColorBrush(Color.FromArgb("#F7C8DB"));

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector>
    <sliders:SfDateTimeRangeSelector.ThumbStyle>
        <sliders:SliderThumbStyle OverlapStroke="#F7C8DB" />
    </sliders:SfDateTimeRangeSelector.ThumbStyle>
</sliders:SfDateTimeRangeSelector>

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector();
rangeSelector.ThumbStyle.OverlapStroke = new SolidColorBrush(Color.FromArgb("#F7C8DB"));

Radius

Gets or sets the radius for the thumbs in the SfSlider, SfRangeSlider, SfRangeSelector,
SfDateTimeSlider, SfDateTimeRangeSlider and SfDateTimeRangeSelector.

Declaration

public double Radius { get; set; }

Property Value

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

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider>
    <sliders:SfSlider.ThumbStyle>
        <sliders:SliderThumbStyle Radius = "15" />
    </sliders:SfSlider.ThumbStyle>
</sliders:SfSlider>

SfSlider slider = new SfSlider();
slider.ThumbStyle.Radius = 15;

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider>
    <sliders:SfDateTimeSlider.ThumbStyle>
        <sliders:SliderThumbStyle Radius = "15" />
    </sliders:SfDateTimeSlider.ThumbStyle>
</sliders:SfDateTimeSlider>

SfDateTimeSlider slider = new SfDateTimeSlider();
slider.ThumbStyle.Radius = 15;

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider>
    <sliders:SfRangeSlider.ThumbStyle>
        <sliders:SliderThumbStyle Radius = "15" />
    </sliders:SfRangeSlider.ThumbStyle>
</sliders:SfRangeSlider>

SfRangeSlider rangeSlider = new SfRangeSlider();
rangeSlider.ThumbStyle.Radius = 15;

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider>
    <sliders:SfDateTimeRangeSlider.ThumbStyle>
        <sliders:SliderThumbStyle Radius = "15" />
    </sliders:SfDateTimeRangeSlider.ThumbStyle>
</sliders:SfDateTimeRangeSlider>

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider();
rangeSlider.ThumbStyle.Radius = 15;

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector>
    <sliders:SfRangeSelector.ThumbStyle>
        <sliders:SliderThumbStyle Radius="15" />
    </sliders:SfRangeSelector.ThumbStyle>
</sliders:SfRangeSelector>

SfRangeSelector rangeSelector = new SfRangeSelector();
rangeSelector.ThumbStyle.Radius = 15;

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector>
    <sliders:SfDateTimeRangeSelector.ThumbStyle>
        <sliders:SliderThumbStyle Radius="15" />
    </sliders:SfDateTimeRangeSelector.ThumbStyle>
</sliders:SfDateTimeRangeSelector>

SfRangeSelector rangeSelector = new SfRangeSelector();
rangeSelector.ThumbStyle.Radius = 15;

Stroke

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

Declaration

public Brush Stroke { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	The default brush is `SolidColorBrush(Colors.Transparent))`.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider>
    <sliders:SfSlider.ThumbStyle>
        <sliders:SliderThumbStyle Stroke = "#F7C8DB"
                                  StrokeThickness = "2" />
    </sliders:SfSlider.ThumbStyle>
</sliders:SfSlider>

SfSlider slider = new SfSlider();
slider.ThumbStyle.Stroke = new SolidColorBrush(Color.FromArgb("#F7C8DB"));
slider.ThumbStyle.StrokeThickness = 2;

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider>
    <sliders:SfDateTimeSlider.ThumbStyle>
        <sliders:SliderThumbStyle Stroke = "#F7C8DB"
                                  StrokeThickness = "2" />
    </sliders:SfDateTimeSlider.ThumbStyle>
</sliders:SfDateTimeSlider>

SfDateTimeSlider slider = new SfDateTimeSlider();
slider.ThumbStyle.Stroke = new SolidColorBrush(Color.FromArgb("#F7C8DB"));
slider.ThumbStyle.StrokeThickness = 2;

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider>
    <sliders:SfRangeSlider.ThumbStyle>
        <sliders:SliderThumbStyle Stroke = "#F7C8DB"
                                  StrokeThickness = "2" />
    </sliders:SfRangeSlider.ThumbStyle>
</sliders:SfRangeSlider>

SfRangeSlider rangeSlider = new SfRangeSlider();
rangeSlider.ThumbStyle.Stroke = new SolidColorBrush(Color.FromArgb("#F7C8DB"));
rangeSlider.ThumbStyle.StrokeThickness = 2;

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider>
    <sliders:SfDateTimeRangeSlider.ThumbStyle>
        <sliders:SliderThumbStyle Stroke = "#F7C8DB"
                                  StrokeThickness = "2" />
    </sliders:SfDateTimeRangeSlider.ThumbStyle>
</sliders:SfDateTimeRangeSlider>

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider();
rangeSlider.ThumbStyle.Stroke = new SolidColorBrush(Color.FromArgb("#F7C8DB"));
rangeSlider.ThumbStyle.StrokeThickness = 2;

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector>
    <sliders:SfRangeSelector.ThumbStyle>
        <sliders:SliderThumbStyle Stroke="#F7C8DB"
                                  StrokeThickness="2" />
    </sliders:SfRangeSelector.ThumbStyle>
</sliders:SfRangeSelector>

SfRangeSelector rangeSelector = new SfRangeSelector();
rangeSelector.ThumbStyle.Stroke = new SolidColorBrush(Color.FromArgb("#F7C8DB"));
rangeSelector.ThumbStyle.StrokeThickness = 2;

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector>
    <sliders:SfDateTimeRangeSelector.ThumbStyle>
        <sliders:SliderThumbStyle Stroke="#F7C8DB"
                                  StrokeThickness="2" />
    </sliders:SfDateTimeRangeSelector.ThumbStyle>
</sliders:SfDateTimeRangeSelector>

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector();
rangeSelector.ThumbStyle.Stroke = new SolidColorBrush(Color.FromArgb("#F7C8DB"));
rangeSelector.ThumbStyle.StrokeThickness = 2;

StrokeThickness

Gets or sets the color for the thumbs in the SfSlider, SfRangeSlider, SfRangeSelector,
SfDateTimeSlider, SfDateTimeRangeSlider and SfDateTimeRangeSelector.

Declaration

public double StrokeThickness { get; set; }

Property Value

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

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider>
    <sliders:SfSlider.ThumbStyle>
        <sliders:SliderThumbStyle Stroke = "#F7C8DB"
                                  StrokeThickness = "2" />
    </sliders:SfSlider.ThumbStyle>
</sliders:SfSlider>

SfSlider slider = new SfSlider();
slider.ThumbStyle.Stroke = new SolidColorBrush(Color.FromArgb("#F7C8DB"));
slider.ThumbStyle.StrokeThickness = 2;

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider>
    <sliders:SfDateTimeSlider.ThumbStyle>
        <sliders:SliderThumbStyle Stroke = "#F7C8DB"
                                  StrokeThickness = "2" />
    </sliders:SfDateTimeSlider.ThumbStyle>
</sliders:SfDateTimeSlider>

SfDateTimeSlider slider = new SfDateTimeSlider();
slider.ThumbStyle.Stroke = new SolidColorBrush(Color.FromArgb("#F7C8DB"));
slider.ThumbStyle.StrokeThickness = 2;

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider>
    <sliders:SfRangeSlider.ThumbStyle>
        <sliders:SliderThumbStyle Stroke = "#F7C8DB"
                                  StrokeThickness = "2" />
    </sliders:SfRangeSlider.ThumbStyle>
</sliders:SfRangeSlider>

SfRangeSlider rangeSlider = new SfRangeSlider();
rangeSlider.ThumbStyle.Stroke = new SolidColorBrush(Color.FromArgb("#F7C8DB"));
rangeSlider.ThumbStyle.StrokeThickness = 2;

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider>
    <sliders:SfDateTimeRangeSlider.ThumbStyle>
        <sliders:SliderThumbStyle Stroke = "#F7C8DB"
                                  StrokeThickness = "2" />
    </sliders:SfDateTimeRangeSlider.ThumbStyle>
</sliders:SfDateTimeRangeSlider>

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider();
rangeSlider.ThumbStyle.Stroke = new SolidColorBrush(Color.FromArgb("#F7C8DB"));
rangeSlider.ThumbStyle.StrokeThickness = 2;

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector>
    <sliders:SfRangeSelector.ThumbStyle>
        <sliders:SliderThumbStyle Stroke="#F7C8DB"
                                  StrokeThickness="2" />
    </sliders:SfRangeSelector.ThumbStyle>
</sliders:SfRangeSelector>

SfRangeSelector rangeSelector = new SfRangeSelector();
rangeSelector.ThumbStyle.Stroke = new SolidColorBrush(Color.FromArgb("#F7C8DB"));
rangeSelector.ThumbStyle.StrokeThickness = 2;

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector>
    <sliders:SfDateTimeRangeSelector.ThumbStyle>
        <sliders:SliderThumbStyle Stroke="#F7C8DB"
                                  StrokeThickness="2" />
    </sliders:SfDateTimeRangeSelector.ThumbStyle>
</sliders:SfDateTimeRangeSelector>

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector();
rangeSelector.ThumbStyle.Stroke = new SolidColorBrush(Color.FromArgb("#F7C8DB"));
rangeSelector.ThumbStyle.StrokeThickness = 2;