Class SliderThumbOverlayStyle

Options to customize the slider thumb overlay.

Inheritance

System.Object

SliderThumbOverlayStyle

Namespace: Syncfusion.Maui.Sliders

Assembly: Syncfusion.Maui.Sliders.dll

Syntax

public class SliderThumbOverlayStyle : BindableObject

Constructors

SliderThumbOverlayStyle()

Declaration

public SliderThumbOverlayStyle()

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.

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.

Properties

Fill

Gets or sets the brush for the overlay in the SfSlider, SfRangeSlider, SfRangeSelector,
SfDateTimeSlider, SfDateTimeRangeSlider and SfDateTimeRangeSelector. This get appears only when interacting the thumbs.

Declaration

public Brush Fill { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Brush	The default brush is `SolidColorBrush(Color.FromRgba(81, 43, 212, 31))`.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider>
    <sliders:SfSlider.ThumbOverlayStyle>
        <sliders:SliderThumbOverlayStyle Fill = "#F7C8DB" />
    </sliders:SfSlider.ThumbOverlayStyle>
</sliders:SfSlider>

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

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider>
    <sliders:SfDateTimeSlider.ThumbOverlayStyle>
        <sliders:SliderThumbOverlayStyle Fill = "#F7C8DB" />
    </sliders:SfDateTimeSlider.ThumbOverlayStyle>
</sliders:SfDateTimeSlider>

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

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider>
    <sliders:SfRangeSlider.ThumbOverlayStyle>
        <sliders:SliderThumbOverlayStyle Fill = "#F7C8DB" />
    </sliders:SfRangeSlider.ThumbOverlayStyle>
</sliders:SfRangeSlider>

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

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider>
    <sliders:SfDateTimeRangeSlider.ThumbOverlayStyle>
        <sliders:SliderThumbOverlayStyle Fill = "#F7C8DB" />
    </sliders:SfDateTimeRangeSlider.ThumbOverlayStyle>
</sliders:SfDateTimeRangeSlider>

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

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector>
    <sliders:SfRangeSelector.ThumbOverlayStyle>
        <sliders:SliderThumbOverlayStyle Fill="#F7C8DB" />
    </sliders:SfRangeSelector.ThumbOverlayStyle>
</sliders:SfRangeSelector>

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

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector>
    <sliders:SfDateTimeRangeSelector.ThumbOverlayStyle>
        <sliders:SliderThumbOverlayStyle Fill="#F7C8DB" />
    </sliders:SfDateTimeRangeSelector.ThumbOverlayStyle>
</sliders:SfDateTimeRangeSelector>

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

Radius

Gets or sets the radius for the overlay in the SfSlider, SfRangeSlider, SfRangeSelector,
SfDateTimeSlider, SfDateTimeRangeSlider and SfDateTimeRangeSelector. This get appears only when interacting the thumbs.

Declaration

public double Radius { get; set; }

Property Value

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

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider>
    <sliders:SfSlider.ThumbOverlayStyle>
        <sliders:SliderThumbOverlayStyle Radius = "20" />
    </sliders:SfSlider.ThumbOverlayStyle>
</sliders:SfSlider>

SfSlider slider = new SfSlider();
slider.ThumbOverlayStyle.Radius = 20;

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider>
    <sliders:SfDateTimeSlider.ThumbOverlayStyle>
        <sliders:SliderThumbOverlayStyle Radius = "20" />
    </sliders:SfDateTimeSlider.ThumbOverlayStyle>
</sliders:SfDateTimeSlider>

SfDateTimeSlider slider = new SfDateTimeSlider();
slider.ThumbOverlayStyle.Radius = 20;

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider>
    <sliders:SfRangeSlider.ThumbOverlayStyle>
        <sliders:SliderThumbOverlayStyle Radius = "20" />
    </sliders:SfRangeSlider.ThumbOverlayStyle>
</sliders:SfRangeSlider>

SfRangeSlider rangeSlider = new SfRangeSlider();
rangeSlider.ThumbOverlayStyle.Radius = 20;

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider>
    <sliders:SfDateTimeRangeSlider.ThumbOverlayStyle>
        <sliders:SliderThumbOverlayStyle Radius = "20" />
    </sliders:SfDateTimeRangeSlider.ThumbOverlayStyle>
</sliders:SfDateTimeRangeSlider>

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider();
rangeSlider.ThumbOverlayStyle.Radius = 20;

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector>
    <sliders:SfRangeSelector.ThumbOverlayStyle>
        <sliders:SliderThumbOverlayStyle Radius="20" />
    </sliders:SfRangeSelector.ThumbOverlayStyle>
</sliders:SfRangeSelector>

SfRangeSelector rangeSelector = new SfRangeSelector();
rangeSelector.ThumbOverlayStyle.Radius = 20;

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector>
    <sliders:SfDateTimeRangeSelector.ThumbOverlayStyle>
        <sliders:SliderThumbOverlayStyle Radius="20" />
    </sliders:SfDateTimeRangeSelector.ThumbOverlayStyle>
</sliders:SfDateTimeRangeSelector>

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector();
rangeSelector.ThumbOverlayStyle.Radius = 20;