public abstract class RangeView<T> : SfView, IDrawableLayout, IDrawable, IAbsoluteLayout, ILayout, IView, IElement, ITransform, IContainer, IList<IView>, ICollection<IView>, IEnumerable<IView>, IEnumerable, ISafeAreaView, IPadding, ICrossPlatformLayout, IVisualTreeElement, ISemanticsProvider, ITouchListener, ITapGestureListener, IPanGestureListener, IGestureListener, IInteractionState

Type Parameters

Name
T

Constructors

RangeView()

Initializes a new instance of the SfSlider, SfDateTimeSlider, SfRangeSlider, SfDateTimeRangeSlider, SfRangeSelector, and SfDateTimeRangeSelector classes.

Declaration

public RangeView()

Fields

DeferredUpdateDelayProperty

The backing store for the DeferredUpdateDelay field.

Declaration

public static readonly BindableProperty DeferredUpdateDelayProperty

Field Value

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

DividerStyleProperty

The backing store for the DividerStyle field.

Declaration

public static readonly BindableProperty DividerStyleProperty

Field Value

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

DragCompletedCommandParameterProperty

The backing store for the DragCompletedCommandParameter field.

Declaration

public static readonly BindableProperty DragCompletedCommandParameterProperty

Field Value

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

DragCompletedCommandProperty

The backing store for the DragCompletedCommand field.

Declaration

public static readonly BindableProperty DragCompletedCommandProperty

Field Value

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

DragStartedCommandParameterProperty

The backing store for the DragStartedCommandParameter field.

Declaration

public static readonly BindableProperty DragStartedCommandParameterProperty

Field Value

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

DragStartedCommandProperty

The backing store for the DragStartedCommand field.

Declaration

public static readonly BindableProperty DragStartedCommandProperty

Field Value

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

EdgeLabelsPlacementProperty

Identifies the EdgeLabelsPlacement bindable property.

Declaration

public static readonly BindableProperty EdgeLabelsPlacementProperty

Field Value

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

EnableDeferredUpdateProperty

The backing store for the EnableDeferredUpdate field.

Declaration

public static readonly BindableProperty EnableDeferredUpdateProperty

Field Value

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

IntervalProperty

The backing store for the Interval field.

Declaration

public static readonly BindableProperty IntervalProperty

Field Value

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

IsInversedProperty

The backing store for the IsInversed field.

Declaration

public static readonly BindableProperty IsInversedProperty

Field Value

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

LabelsPlacementProperty

The backing store for the LabelsPlacement field.

Declaration

public static readonly BindableProperty LabelsPlacementProperty

Field Value

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

LabelStyleProperty

The backing store for the LabelStyle field.

Declaration

public static readonly BindableProperty LabelStyleProperty

Field Value

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

MajorTickStyleProperty

The backing store for the MajorTickStyle field.

Declaration

public static readonly BindableProperty MajorTickStyleProperty

Field Value

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

MaximumProperty

The backing store for the Maximum field.

Declaration

public static readonly BindableProperty MaximumProperty

Field Value

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

MinimumProperty

The backing store for the Minimum field.

Declaration

public static readonly BindableProperty MinimumProperty

Field Value

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

MinorTicksPerIntervalProperty

The backing store for the MinorTicksPerInterval field.

Declaration

public static readonly BindableProperty MinorTicksPerIntervalProperty

Field Value

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

MinorTickStyleProperty

The backing store for the MinorTickStyle field.

Declaration

public static readonly BindableProperty MinorTickStyleProperty

Field Value

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

ShowDividersProperty

The backing store for the ShowDividers field.

Declaration

public static readonly BindableProperty ShowDividersProperty

Field Value

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

ShowLabelsProperty

The backing store for the ShowLabels field.

Declaration

public static readonly BindableProperty ShowLabelsProperty

Field Value

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

ShowTicksProperty

The backing store for the ShowTicks field.

Declaration

public static readonly BindableProperty ShowTicksProperty

Field Value

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

ThumbOverlayStyleProperty

The backing store for the ThumbOverlayStyle field.

Declaration

public static readonly BindableProperty ThumbOverlayStyleProperty

Field Value

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

ThumbStyleProperty

The backing store for the ThumbStyle field.

Declaration

public static readonly BindableProperty ThumbStyleProperty

Field Value

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

TooltipProperty

The backing store for the Tooltip field.

Declaration

public static readonly BindableProperty TooltipProperty

Field Value

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

TrackExtentProperty

The backing store for the TrackExtent field.

Declaration

public static readonly BindableProperty TrackExtentProperty

Field Value

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

TrackStyleProperty

The backing store for the TrackStyle field.

Declaration

public static readonly BindableProperty TrackStyleProperty

Field Value

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

Properties

DeferredUpdateDelay

Gets or sets the DeferredUpdateDelay, expressed in milliseconds, at which to update the deferred values.

Declaration

public int DeferredUpdateDelay { get; set; }

Property Value

Type	Description
System.Int32	Defaults to `500` ms.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider EnableDeferredUpdate="True"
                  DeferredUpdateDelay="1000" />

SfSlider slider = new SfSlider()
{
   EnableDeferredUpdate = true,
   DeferredUpdateDelay = 1000
};

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider EnableDeferredUpdate="True"
                          DeferredUpdateDelay="1000" />

SfDateTimeSlider slider = new SfDateTimeSlider()
{
   EnableDeferredUpdate = true,
   DeferredUpdateDelay = 1000
};

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider EnableDeferredUpdate="True"
                       DeferredUpdateDelay="1000" />

SfRangeSlider rangeSlider = new SfRangeSlider()
{ 
     EnableDeferredUpdate = true,
     DeferredUpdateDelay = 1000
};

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider EnableDeferredUpdate="True"
                               DeferredUpdateDelay="1000" />

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider()
{ 
     EnableDeferredUpdate = true,
     DeferredUpdateDelay = 1000
};

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector EnableDeferredUpdate="True"
                         DeferredUpdateDelay="1000" />

SfRangeSelector rangeSelector = new SfRangeSelector()
{
     EnableDeferredUpdate = true,
     DeferredUpdateDelay = 1000
};

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector EnableDeferredUpdate="True"
                                 DeferredUpdateDelay="1000" />

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
{
     EnableDeferredUpdate = true,
     DeferredUpdateDelay = 1000
};

DividerStyle

Gets or sets a value to customize the appearance of the divider shape.

Declaration

public SliderDividerStyle DividerStyle { get; set; }

Property Value

Type	Description
SliderDividerStyle	Defaults to `SliderDividerStyle`.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider ShowDividers="True">
    <sliders:SfSlider.DividerStyle>
        <sliders:SliderDividerStyle ActiveRadius="5"
                                    InactiveRadius="2.5" />
    </sliders:SfSlider.TrackStyle>
</sliders:SfSlider>

SfSlider slider = new SfSlider() { ShowDividers = true };
slider.DividerStyle.ActiveRadius = 5;
slider.DividerStyle.InactiveRadius = 2.5;

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider ShowDividers="True">
    <sliders:SfDateTimeSlider.DividerStyle>
        <sliders:SliderDividerStyle ActiveRadius="5"
                                    InactiveRadius="2.5" />
    </sliders:SfDateTimeSlider.TrackStyle>
</sliders:SfDateTimeSlider>

SfDateTimeSlider slider = new SfDateTimeSlider() { ShowDividers = true };
slider.DividerStyle.ActiveRadius = 5;
slider.DividerStyle.InactiveRadius = 2.5;

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider Interval="0.2"
                       ShowDividers="True">
    <sliders:SfRangeSlider.DividerStyle>
        <sliders:SliderDividerStyle ActiveFill="Red"
                                    InactiveFill="Orange" />
    </sliders:SfRangeSlider.DividerStyle>
</sliders:SfRangeSlider>

SfRangeSlider rangeSlider = new SfRangeSlider() { ShowDividers= true };
rangeSlider.DividerStyle.ActiveFill = new SolidColorBrush(Colors.Red);
rangeSlider.DividerStyle.InactiveFill = new SolidColorBrush(Colors.Orange);

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider Interval="0.2"
                               ShowDividers="True">
    <sliders:SfDateTimeRangeSlider.DividerStyle>
        <sliders:SliderDividerStyle ActiveFill="Red"
                                    InactiveFill="Orange" />
    </sliders:SfDateTimeRangeSlider.DividerStyle>
</sliders:SfDateTimeRangeSlider>

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider() { ShowDividers= true };
rangeSlider.DividerStyle.ActiveFill = new SolidColorBrush(Colors.Red);
rangeSlider.DividerStyle.InactiveFill = new SolidColorBrush(Colors.Orange);

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector Interval="0.2"
                         ShowDividers="True">
    <sliders:SfRangeSelector.DividerStyle>
        <sliders:SliderDividerStyle ActiveFill="Red"
                                    InactiveFill="Orange" />
    </sliders:SfRangeSelector.DividerStyle>
</sliders:SfRangeSelector>

SfRangeSelector rangeSelector = new SfRangeSelector() { ShowDividers = true };
rangeSelector.DividerStyle.ActiveFill = new SolidColorBrush(Colors.Red);
rangeSelector.DividerStyle.InactiveFill = new SolidColorBrush(Colors.Orange);

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector Interval="0.2"
                                 ShowDividers="True">
    <sliders:SfDateTimeRangeSelector.DividerStyle>
        <sliders:SliderDividerStyle ActiveFill="Red"
                                    InactiveFill="Orange" />
    </sliders:SfDateTimeRangeSelector.DividerStyle>
</sliders:SfDateTimeRangeSelector>

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector() { ShowDividers = true };
rangeSelector.DividerStyle.ActiveFill = new SolidColorBrush(Colors.Red);
rangeSelector.DividerStyle.InactiveFill = new SolidColorBrush(Colors.Orange);

DragCompletedCommand

Gets or sets the command that will be executed when we completed moving the thumb.

Declaration

public ICommand DragCompletedCommand { get; set; }

Property Value

Type
System.Windows.Input.ICommand

Examples

Snippet for SfSlider

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfSlider DragCompletedCommand = "{Binding DragCompletedCommand}" />
</ ContentPage.Content>

SfSlider slider = new SfSlider() { DragCompletedCommand = viewModel.DragCompletedCommand };

//ViewModel.cs
public class ViewModel
{
    public Command DragCompletedCommand;
    public ViewModel()
    {
        DragCompletedCommand = new Command<object>(DragCompleted);
    }

    private void DragCompleted(object obj)
    {
        // Do any desired actions when drag completes.
    }
}

Snippet for SfDateTimeSlider

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfDateTimeSlider DragCompletedCommand = "{Binding DragCompletedCommand}" />
</ ContentPage.Content>

SfDateTimeSlider slider = new SfDateTimeSlider() { DragCompletedCommand = viewModel.DragCompletedCommand };

//ViewModel.cs
public class ViewModel
{
    public Command DragCompletedCommand;
    public ViewModel()
    {
        DragCompletedCommand = new Command<object>(DragCompleted);
    }

    private void DragCompleted(object obj)
    {
        // Do any desired actions when drag completes.
    }
}

Snippet for SfRangeSlider

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfRangeSlider DragCompletedCommand = "{Binding DragCompletedCommand}" />
</ ContentPage.Content>

SfRangeSlider slider = new SfRangeSlider() { DragCompletedCommand = viewModel.DragCompletedCommand };

//ViewModel.cs
public class ViewModel
{
    public Command DragCompletedCommand;
    public ViewModel()
    {
        DragCompletedCommand = new Command<object>(DragCompleted);
    }

    private void DragCompleted(object obj)
    {
        // Do any desired actions when drag completes.
    }
}

Snippet for SfDateTimeRangeSlider

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfDateTimeRangeSlider DragCompletedCommand = "{Binding DragCompletedCommand}" />
</ ContentPage.Content>

SfDateTimeRangeSlider slider = new SfDateTimeRangeSlider() { DragCompletedCommand = viewModel.DragCompletedCommand };

//ViewModel.cs
public class ViewModel
{
    public Command DragCompletedCommand;
    public ViewModel()
    {
        DragCompletedCommand = new Command<object>(DragCompleted);
    }

    private void DragCompleted(object obj)
    {
        // Do any desired actions when drag completes.
    }
}

Snippet for SfRangeSelector

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfRangeSelector DragCompletedCommand = "{Binding DragCompletedCommand}" />
</ ContentPage.Content>

SfRangeSelector slider = new SfRangeSelector() { DragCompletedCommand = viewModel.DragCompletedCommand };

//ViewModel.cs
public class ViewModel
{
    public Command DragCompletedCommand;
    public ViewModel()
    {
        DragCompletedCommand = new Command<object>(DragCompleted);
    }

    private void DragCompleted(object obj)
    {
        // Do any desired actions when drag completes.
    }
}

Snippet for SfDateTimeRangeSelector

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfDateTimeRangeSelector DragCompletedCommand = "{Binding DragCompletedCommand}" />
</ ContentPage.Content>

SfDateTimeRangeSelector slider = new SfDateTimeRangeSelector() { DragCompletedCommand = viewModel.DragCompletedCommand };

//ViewModel.cs
public class ViewModel
{
    public Command DragCompletedCommand;
    public ViewModel()
    {
        DragCompletedCommand = new Command<object>(DragCompleted);
    }

    private void DragCompleted(object obj)
    {
        // Do any desired actions when drag completes.
    }
}

DragCompletedCommandParameter

Gets or sets the parameter for the DragCompletedCommandParameter.

Declaration

public object DragCompletedCommandParameter { get; set; }

Property Value

Type
System.Object

Examples

Snippet for SfSlider

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfSlider DragCompletedCommand="{Binding DragCompletedCommand}"
                      DragCompletedCommandParameter="1" />
</ ContentPage.Content>

SfSlider slider = new SfSlider()
{
    DragCompletedCommand = viewModel.DragCompletedCommand,
    DragCompletedCommandParameter = 1
};

//ViewModel.cs
public class ViewModel
{
    public Command DragCompletedCommand;
    public ViewModel()
    {
        DragCompletedCommand = new Command<object>(DragCompleted);
    }

    private void DragCompleted(object obj)
    {
        // Do any desired actions when drag completes.
    }
}

Snippet for SfDateTimeSlider

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfDateTimeSlider DragCompletedCommand="{Binding DragCompletedCommand}"
                              DragCompletedCommandParameter="1" />
</ ContentPage.Content>

SfDateTimeSlider slider = new SfDateTimeSlider()
{
    DragCompletedCommand = viewModel.DragCompletedCommand,
    DragCompletedCommandParameter = 1
};

//ViewModel.cs
public class ViewModel
{
    public Command DragCompletedCommand;
    public ViewModel()
    {
        DragCompletedCommand = new Command<object>(DragCompleted);
    }

    private void DragCompleted(object obj)
    {
        // Do any desired actions when drag completes.
    }
}

Snippet for SfRangeSlider

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfRangeSlider DragCompletedCommand="{Binding DragCompletedCommand}"
                           DragCompletedCommandParameter="1" />
</ ContentPage.Content>

SfRangeSlider slider = new SfRangeSlider()
{
    DragCompletedCommand = viewModel.DragCompletedCommand,
    DragCompletedCommandParameter = 1
};

//ViewModel.cs
public class ViewModel
{
    public Command DragCompletedCommand;
    public ViewModel()
    {
        DragCompletedCommand = new Command<object>(DragCompleted);
    }

    private void DragCompleted(object obj)
    {
        // Do any desired actions when drag completes.
    }
}

Snippet for SfDateTimeRangeSlider

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfDateTimeRangeSlider DragCompletedCommand="{Binding DragCompletedCommand}"
                                   DragCompletedCommandParameter="1" />
</ ContentPage.Content>

SfDateTimeRangeSlider slider = new SfDateTimeRangeSlider()
{
    DragCompletedCommand = viewModel.DragCompletedCommand,
    DragCompletedCommandParameter = 1
};

//ViewModel.cs
public class ViewModel
{
    public Command DragCompletedCommand;
    public ViewModel()
    {
        DragCompletedCommand = new Command<object>(DragCompleted);
    }

    private void DragCompleted(object obj)
    {
        // Do any desired actions when drag completes.
    }
}

Snippet for SfRangeSelector

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfRangeSelector DragCompletedCommand="{Binding DragCompletedCommand}"
                             DragCompletedCommandParameter="1" />
</ ContentPage.Content>

SfRangeSelector slider = new SfRangeSelector()
{
    DragCompletedCommand = viewModel.DragCompletedCommand,
    DragCompletedCommandParameter = 1
};

//ViewModel.cs
public class ViewModel
{
    public Command DragCompletedCommand;
    public ViewModel()
    {
        DragCompletedCommand = new Command<object>(DragCompleted);
    }

    private void DragCompleted(object obj)
    {
        // Do any desired actions when drag completes.
    }
}

Snippet for SfDateTimeRangeSelector

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfDateTimeRangeSelector DragCompletedCommand="{Binding DragCompletedCommand}"
                                     DragCompletedCommandParameter="1" />
</ ContentPage.Content>

SfDateTimeRangeSelector slider = new SfDateTimeRangeSelector()
{
    DragCompletedCommand = viewModel.DragCompletedCommand,
    DragCompletedCommandParameter = 1
};

//ViewModel.cs
public class ViewModel
{
    public Command DragCompletedCommand;
    public ViewModel()
    {
        DragCompletedCommand = new Command<object>(DragCompleted);
    }

    private void DragCompleted(object obj)
    {
        // Do any desired actions when drag completes.
    }
}

DragStartedCommand

Gets or sets the command that will be executed when we start moving the thumb.

Declaration

public ICommand DragStartedCommand { get; set; }

Property Value

Type
System.Windows.Input.ICommand

Examples

Snippet for SfSlider

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfSlider DragStartedCommand = "{Binding DragStartedCommand}" />
</ ContentPage.Content>

SfSlider slider = new SfSlider() { DragStartedCommand = viewModel.DragStartedCommand };

//ViewModel.cs
public class ViewModel
{
    public Command DragStartedCommand;
    public ViewModel()
    {
        DragStartedCommand = new Command<object>(DragStarted);
    }

    private void DragStarted(object obj)
    {
        // Do any desired actions when drag starts.
    }
}

Snippet for SfDateTimeSlider

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfDateTimeSlider DragStartedCommand = "{Binding DragStartedCommand}" />
</ ContentPage.Content>

SfDateTimeSlider slider = new SfDateTimeSlider() { DragStartedCommand = viewModel.DragStartedCommand };

//ViewModel.cs
public class ViewModel
{
    public Command DragStartedCommand;
    public ViewModel()
    {
        DragStartedCommand = new Command<object>(DragStarted);
    }

    private void DragStarted(object obj)
    {
        // Do any desired actions when drag starts.
    }
}

Snippet for SfRangeSlider

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfRangeSlider DragStartedCommand = "{Binding DragStartedCommand}" />
</ ContentPage.Content>

SfRangeSlider slider = new SfRangeSlider() { DragStartedCommand = viewModel.DragStartedCommand };

//ViewModel.cs
public class ViewModel
{
    public Command DragStartedCommand;
    public ViewModel()
    {
        DragStartedCommand = new Command<object>(DragStarted);
    }

    private void DragStarted(object obj)
    {
        // Do any desired actions when drag starts.
    }
}

Snippet for SfDateTimeRangeSlider

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfDateTimeRangeSlider DragStartedCommand = "{Binding DragStartedCommand}" />
</ ContentPage.Content>

SfDateTimeRangeSlider slider = new SfDateTimeRangeSlider() { DragStartedCommand = viewModel.DragStartedCommand };

//ViewModel.cs
public class ViewModel
{
    public Command DragStartedCommand;
    public ViewModel()
    {
        DragStartedCommand = new Command<object>(DragStarted);
    }

    private void DragStarted(object obj)
    {
        // Do any desired actions when drag starts.
    }
}

Snippet for SfRangeSelector

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfRangeSelector DragStartedCommand = "{Binding DragStartedCommand}" />
</ ContentPage.Content>

SfRangeSelector slider = new SfRangeSelector() { DragStartedCommand = viewModel.DragStartedCommand };

//ViewModel.cs
public class ViewModel
{
    public Command DragStartedCommand;
    public ViewModel()
    {
        DragStartedCommand = new Command<object>(DragStarted);
    }

    private void DragStarted(object obj)
    {
        // Do any desired actions when drag starts.
    }
}

Snippet for SfDateTimeRangeSelector

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfDateTimeRangeSelector DragStartedCommand = "{Binding DragStartedCommand}" />
</ ContentPage.Content>

SfDateTimeRangeSelector slider = new SfDateTimeRangeSelector() { DragStartedCommand = viewModel.DragStartedCommand };

//ViewModel.cs
public class ViewModel
{
    public Command DragStartedCommand;
    public ViewModel()
    {
        DragStartedCommand = new Command<object>(DragStarted);
    }

    private void DragStarted(object obj)
    {
        // Do any desired actions when drag starts.
    }
}

DragStartedCommandParameter

Gets or sets the parameter for the DragStartedCommandParameter.

Declaration

public object DragStartedCommandParameter { get; set; }

Property Value

Type
System.Object

Examples

Snippet for SfSlider

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfSlider DragStartedCommand="{Binding DragStartedCommand}"
                      DragStartedCommandParameter="1" />
</ ContentPage.Content>

SfSlider slider = new SfSlider()
{
    DragStartedCommand = viewModel.DragStartedCommand,
    DragStartedCommandParameter = 1
};

//ViewModel.cs
public class ViewModel
{
    public Command DragStartedCommand;
    public ViewModel()
    {
        DragStartedCommand = new Command<object>(DragStarted);
    }

    private void DragStarted(object obj)
    {
        // Do any desired actions when drag starts.
    }
}

Snippet for SfDateTimeSlider

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfDateTimeSlider DragStartedCommand="{Binding DragStartedCommand}"
                              DragStartedCommandParameter="1" />
</ ContentPage.Content>

SfDateTimeSlider slider = new SfDateTimeSlider()
{
    DragStartedCommand = viewModel.DragStartedCommand,
    DragStartedCommandParameter = 1
};

//ViewModel.cs
public class ViewModel
{
    public Command DragStartedCommand;
    public ViewModel()
    {
        DragStartedCommand = new Command<object>(DragStarted);
    }

    private void DragStarted(object obj)
    {
        // Do any desired actions when drag starts.
    }
}

Snippet for SfRangeSlider

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfRangeSlider DragStartedCommand="{Binding DragStartedCommand}"
                           DragStartedCommandParameter="1" />
</ ContentPage.Content>

SfRangeSlider slider = new SfRangeSlider()
{
    DragStartedCommand = viewModel.DragStartedCommand,
    DragStartedCommandParameter = 1
};

//ViewModel.cs
public class ViewModel
{
    public Command DragStartedCommand;
    public ViewModel()
    {
        DragStartedCommand = new Command<object>(DragStarted);
    }

    private void DragStarted(object obj)
    {
        // Do any desired actions when drag starts.
    }
}

Snippet for SfDateTimeRangeSlider

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfDateTimeRangeSlider DragStartedCommand="{Binding DragStartedCommand}"
                                   DragStartedCommandParameter="1" />
</ ContentPage.Content>

SfDateTimeRangeSlider slider = new SfDateTimeRangeSlider()
{
    DragStartedCommand = viewModel.DragStartedCommand,
    DragStartedCommandParameter = 1
};

//ViewModel.cs
public class ViewModel
{
    public Command DragStartedCommand;
    public ViewModel()
    {
        DragStartedCommand = new Command<object>(DragStarted);
    }

    private void DragStarted(object obj)
    {
        // Do any desired actions when drag starts.
    }
}

Snippet for SfRangeSelector

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfRangeSelector DragStartedCommand="{Binding DragStartedCommand}"
                             DragStartedCommandParameter="1" />
</ ContentPage.Content>

SfRangeSelector slider = new SfRangeSelector()
{
    DragStartedCommand = viewModel.DragStartedCommand,
    DragStartedCommandParameter = 1
};

//ViewModel.cs
public class ViewModel
{
    public Command DragStartedCommand;
    public ViewModel()
    {
        DragStartedCommand = new Command<object>(DragStarted);
    }

    private void DragStarted(object obj)
    {
        // Do any desired actions when drag starts.
    }
}

Snippet for SfDateTimeRangeSelector

XAML
C#

<ContentPage.BindingContext>
    <local:ViewModel x:Name="viewModel" />
</ContentPage.BindingContext>

<ContentPage.Content>
    <sliders:SfDateTimeRangeSelector DragStartedCommand="{Binding DragStartedCommand}"
                                     DragStartedCommandParameter="1" />
</ ContentPage.Content>

SfDateTimeRangeSelector slider = new SfDateTimeRangeSelector()
{
    DragStartedCommand = viewModel.DragStartedCommand,
    DragStartedCommandParameter = 1
};

//ViewModel.cs
public class ViewModel
{
    public Command DragStartedCommand;
    public ViewModel()
    {
        DragStartedCommand = new Command<object>(DragStarted);
    }

    private void DragStarted(object obj)
    {
        // Do any desired actions when drag starts.
    }
}

EdgeLabelsPlacement

Gets or sets the first and last label either inside the track bounds or on the intervals.

If the TrackExtent > 0 and EdgeLabelsPlacement is Inside, the labels get placed inside the extended track edges.

Declaration

public SliderEdgeLabelsPlacement EdgeLabelsPlacement { get; set; }

Property Value

Type	Description
SliderEdgeLabelsPlacement	Defaults to `Default`.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider ShowLabels="True"
                  Interval="0.25"
                  EdgeLabelsPlacement="Inside" />

SfSlider slider = new SfSlider()
{
    ShowLabels = true,
    Interval = 0.25,
    EdgeLabelsPlacement = SliderEdgeLabelsPlacement.Inside,
};

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider ShowLabels="True"
                          Interval="0.25"
                          EdgeLabelsPlacement="Inside" />

SfDateTimeSlider slider = new SfDateTimeSlider()
{
    ShowLabels = true,
    Interval = 0.25,
    EdgeLabelsPlacement=SliderEdgeLabelsPlacement.Inside,
};

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider ShowLabels="True"
                       Interval="0.25"
                       EdgeLabelsPlacement="Inside" />

SfRangeSlider rangeSlider = new SfRangeSlider()
{
    ShowLabels = true,
    Interval = 0.25,
    EdgeLabelsPlacement=SliderEdgeLabelsPlacement.Inside,
};

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider ShowLabels="True"
                               Interval="0.25"
                               EdgeLabelsPlacement="Inside" />

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider()
{
    ShowLabels = true,
    Interval = 0.25,
    EdgeLabelsPlacement=SliderEdgeLabelsPlacement.Inside,
};

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector ShowLabels="True"
                         Interval="0.25"
                         EdgeLabelsPlacement="Inside" />

SfRangeSelector rangeSelector = new SfRangeSelector()
{
    ShowLabels = true,
    Interval = 0.25,
    EdgeLabelsPlacement=SliderEdgeLabelsPlacement.Inside,
};

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector ShowLabels="True"
                                 Interval="0.25"
                                 EdgeLabelsPlacement="Inside" />

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
{
    ShowLabels = true,
    Interval = 0.25,
    EdgeLabelsPlacement=SliderEdgeLabelsPlacement.Inside,
};

EnableDeferredUpdate

Gets or sets a value indicating whether to defer a selection.

It invokes the ValueChanging event when the thumb is dragged and held for the duration specified in the DeferredUpdateDelay. However, the values are immediately updated in touch-up action. By default, the values will be updated as soon as the thumb is dragged.

Declaration

public bool EnableDeferredUpdate { get; set; }

Property Value

Type	Description
System.Boolean	Defaults to `false`.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider EnableDeferredUpdate="True" />

SfSlider slider = new SfSlider() { EnableDeferredUpdate = true };

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider EnableDeferredUpdate="True" />

SfDateTimeSlider slider = new SfDateTimeSlider() { EnableDeferredUpdate = true };

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider EnableDeferredUpdate="True" />

SfRangeSlider rangeSlider = new SfRangeSlider() { EnableDeferredUpdate = true };

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider EnableDeferredUpdate="True" />

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider() { EnableDeferredUpdate = true };

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector EnableDeferredUpdate="True" />

SfRangeSelector rangeSelector = new SfRangeSelector() { EnableDeferredUpdate = true };

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector EnableDeferredUpdate="True" />

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector() { EnableDeferredUpdate = true };

Interval

Gets or sets a value indicating the interval between the slider elements in the track.

For example, if Minimum is 0.0 and Maximum is 10.0 and Interval is 2.0, the slider will render the labels, major ticks, and dividers at 0.0, 2.0, 4.0 and so on.

Declaration

public double Interval { get; set; }

Property Value

Type	Description
System.Double	Defaults to `0.0`.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider Interval="0.2" />

SfSlider slider = new SfSlider() { Interval = 0.2 };

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider Interval="0.2" />

SfDateTimeSlider slider = new SfDateTimeSlider() { Interval = 0.2 };

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider Interval="0.2" />

SfRangeSlider rangeSlider = new SfRangeSlider() {  Interval = 0.2 };

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider Interval="0.2" />

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider() {  Interval = 0.2 };

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector Interval="0.2" />

SfRangeSelector rangeSelector = new SfRangeSelector() { Interval = 0.2 };

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector Interval="0.2" />

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector() { Interval = 0.2 };

IsInversed

Gets or sets a value indicating whether to inverse the slider.

Declaration

public bool IsInversed { get; set; }

Property Value

Type	Description
System.Boolean	Defaults to `false`.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider IsInversed="True" />

SfSlider slider = new SfSlider() { IsInversed = true };

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider IsInversed="True" />

SfDateTimeSlider slider = new SfDateTimeSlider() { IsInversed = true };

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider IsInversed="True" />

SfRangeSlider rangeSlider = new SfRangeSlider() { IsInversed = true };

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider IsInversed="True" />

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider() { IsInversed = true };

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector IsInversed="True" />

SfRangeSelector rangeSelector = new SfRangeSelector() { IsInversed = true };

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector IsInversed="True" />

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector() { IsInversed = true };

LabelsPlacement

Gets or sets the value indicating whether to place the labels either between the major ticks or on the major ticks.

Declaration

public SliderLabelsPlacement LabelsPlacement { get; set; }

Property Value

Type	Description
SliderLabelsPlacement	Defaults to `OnTicks`.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider ShowLabels="True"
                  Interval="0.25"
                  LabelsPlacement="BetweenTicks" />

SfSlider slider = new SfSlider()
{
    ShowLabels = true,
    Interval = 0.25,
    LabelsPlacement = SliderLabelsPlacement.BetweenTicks,
};

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider ShowLabels="True"
                          Interval="0.25"
                          LabelsPlacement="BetweenTicks" />

SfDateTimeSlider slider = new SfDateTimeSlider()
{
    ShowLabels = true,
    Interval = 0.25,
    LabelsPlacement = SliderLabelsPlacement.BetweenTicks,
};

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider ShowLabels="True"
                       Interval="0.25"
                       LabelsPlacement="BetweenTicks" />

SfRangeSlider rangeSlider = new SfRangeSlider()
{
    ShowLabels = true,
    Interval = 0.25,
    LabelsPlacement = SliderLabelsPlacement.BetweenTicks,
};

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider ShowLabels="True"
                               Interval="0.25"
                               LabelsPlacement="BetweenTicks" />

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider()
{
    ShowLabels = true,
    Interval = 0.25,
    LabelsPlacement = SliderLabelsPlacement.BetweenTicks,
};

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector ShowLabels="True"
                         Interval="0.25"
                         LabelsPlacement="BetweenTicks" />

SfRangeSelector rangeSelector = new SfRangeSelector()
{
    ShowLabels = true,
    Interval = 0.25,
    LabelsPlacement = SliderLabelsPlacement.BetweenTicks,
};

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector ShowLabels="True"
                                 Interval="0.25"
                                 LabelsPlacement="BetweenTicks" />

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
{
    ShowLabels = true,
    Interval = 0.25,
    LabelsPlacement = SliderLabelsPlacement.BetweenTicks,
};

LabelStyle

Gets or sets a value to customize the appearance of the labels.

Declaration

public SliderLabelStyle LabelStyle { get; set; }

Property Value

Type	Description
SliderLabelStyle	Defaults to `SliderLabelStyle`.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider ShowLabels="True">
    <sliders:SfRangeSlider.LabelStyle>
        <sliders:SliderLabelStyle ActiveFontSize="12"
                                  InactiveFontSize="10" />
    </sliders:SfRangeSlider.LabelStyle>
</sliders:SfSlider>

SfSlider slider = new SfSlider() { ShowLabels = true };
slider.LabelStyle.ActiveFontSize = 12;
slider.LabelStyle.InactiveFontSize = 10;

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider ShowLabels="True">
    <sliders:SfDateTimeSlider.LabelStyle>
        <sliders:SliderLabelStyle ActiveFontSize="12"
                                  InactiveFontSize="10" />
    </sliders:SfDateTimeSlider.LabelStyle>
</sliders:SfDateTimeSlider>

SfDateTimeSlider slider = new SfDateTimeSlider() { ShowLabels = true };
slider.LabelStyle.ActiveFontSize = 12;
slider.LabelStyle.InactiveFontSize = 10;

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider ShowLabels="True">
    <sliders:SfSlider.LabelStyle>
        <sliders:SliderLabelStyle ActiveFontSize="12"
                                  InactiveFontSize="10" />
    </sliders:SfSlider.LabelStyle>
</sliders:SfRangeSlider>

SfRangeSlider rangeSlider = new SfRangeSlider() { ShowLabels = true };
rangeSlider.LabelStyle.ActiveFontSize = 12;
rangeSlider.LabelStyle.InactiveFontSize = 10;

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider ShowLabels="True">
    <sliders:SfDateTimeRangeSlider.LabelStyle>
        <sliders:SliderLabelStyle ActiveFontSize="12"
                                  InactiveFontSize="10" />
    </sliders:SfDateTimeRangeSlider.LabelStyle>
</sliders:SfDateTimeRangeSlider>

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider() { ShowLabels = true };
rangeSlider.LabelStyle.ActiveFontSize = 12;
rangeSlider.LabelStyle.InactiveFontSize = 10;

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector ShowLabels="True">
    <sliders:SfRangeSelector.LabelStyle>
        <sliders:SliderLabelStyle ActiveFontSize="12"
                                  InactiveFontSize="10" />
    </sliders:SfRangeSelector.LabelStyle>
</sliders:SfRangeSelector>

SfRangeSelector rangeSelector = new SfRangeSelector() { ShowLabels = true };
rangeSelector.LabelStyle.ActiveFontSize = 12;
rangeSelector.LabelStyle.InactiveFontSize = 10;

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector ShowLabels="True">
    <sliders:SfDateTimeRangeSelector.LabelStyle>
        <sliders:SliderLabelStyle ActiveFontSize="12"
                                  InactiveFontSize="10" />
    </sliders:SfDateTimeRangeSelector.LabelStyle>
</sliders:SfDateTimeRangeSelector>

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector() { ShowLabels = true };
rangeSelector.LabelStyle.ActiveFontSize = 12;
rangeSelector.LabelStyle.InactiveFontSize = 10;

MajorTickStyle

Gets or sets a value to customize the appearance of the major tick shape.

Declaration

public SliderTickStyle MajorTickStyle { get; set; }

Property Value

Type	Description
SliderTickStyle	Defaults to `SliderTickStyle`.

Examples

Snippet for SfSlider

XAML
C#

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

SfSlider slider = new SfSlider() { ShowTicks = true };
slider.MajorTickStyle.ActiveFill = new SolidColorBrush(Colors.Red);
slider.MajorTickStyle.InactiveFill = new SolidColorBrush(Colors.Orange);

Snippet for SfDateTimeSlider

XAML
C#

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

SfDateTimeSlider slider = new SfDateTimeSlider() { ShowTicks = true };
slider.MajorTickStyle.ActiveFill = new SolidColorBrush(Colors.Red);
slider.MajorTickStyle.InactiveFill = new SolidColorBrush(Colors.Orange);

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider ShowTicks="True">
    <sliders:SfRangeSlider.MajorTickStyle>
        <sliders:SliderTickStyle ActiveFill="Red" 
                                 InactiveFill="Orange" />
    </sliders:SfRangeSlider.MajorTickStyle>
</sliders:SfRangeSlider>

SfRangeSlider rangeSlider = new SfRangeSlider() { ShowTicks = true };
rangeSlider.MajorTickStyle.ActiveFill = new SolidColorBrush(Colors.Red);
rangeSlider.MajorTickStyle.InactiveFill = new SolidColorBrush(Colors.Orange);

Snippet for SfDateTimeRangeSlider

XAML
C#

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

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider() { ShowTicks = true };
rangeSlider.MajorTickStyle.ActiveFill = new SolidColorBrush(Colors.Red);
rangeSlider.MajorTickStyle.InactiveFill = new SolidColorBrush(Colors.Orange);

Snippet for SfRangeSelector

XAML
C#

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

SfRangeSelector rangeSelector = new SfRangeSelector() { ShowTicks = true };
rangeSelector.MajorTickStyle.ActiveFill = new SolidColorBrush(Colors.Red);
rangeSelector.MajorTickStyle.InactiveFill = new SolidColorBrush(Colors.Orange);

Snippet for SfDateTimeRangeSelector

XAML
C#

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

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector() { ShowTicks = true };
rangeSelector.MajorTickStyle.ActiveFill = new SolidColorBrush(Colors.Red);
rangeSelector.MajorTickStyle.InactiveFill = new SolidColorBrush(Colors.Orange);

Maximum

Gets or sets the maximum value of the track. The track ends at this value.

Declaration

public T Maximum { get; set; }

Property Value

Type	Description
T	Defaults to `1.0` for SfSlider, SfRangeSlider, SfRangeSelector and `null` for SfDateTimeSlider, SfDateTimeRangeSlider, SfDateTimeRangeSelector.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider Maximum = "100" />

SfSlider slider = new SfSlider() { Maximum = 100 };

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider Maximum = "100" />

SfRangeSlider rangeSlider = new SfRangeSlider() { Maximum = 100 };

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector Maximum="100" />

SfRangeSelector rangeSelector = new SfRangeSelector() { Maximum = 100 };

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider Maximum = "2010-1-1" />

SfDateTimeSlider slider = new SfDateTimeSlider()
{
    Maximum = new DateTime(2010, 1, 1)
};

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider Maximum = "2010-1-1" />

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider()
{
    Maximum = new DateTime(2010, 1, 1)
};

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector Maximum="2010-1-1" />

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
{
    Maximum = new DateTime(2010, 1, 1)
};

Minimum

Gets or sets the minimum value of the track. The track starts from this value.

Declaration

public T Minimum { get; set; }

Property Value

Type	Description
T	Defaults to `0.0` for SfSlider, SfRangeSlider, SfRangeSelector and `null` for SfDateTimeSlider, SfDateTimeRangeSlider, SfDateTimeRangeSelector.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider Minimum="10" />

SfSlider slider = new SfSlider() { Minimum = 10 };

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider Maximum = "100" />

SfRangeSlider rangeSlider = new SfRangeSlider() { Maximum = 100 };

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector Maximum="100" />

SfRangeSelector rangeSelector = new SfRangeSelector() { Maximum = 100 };

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider Minimum = "2010-1-1" />

SfDateTimeSlider slider = new SfDateTimeSlider()
{
    Minimum = new DateTime(2010, 1, 1)
};

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider Minimum = "2010-1-1" />

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider()
{
    Minimum = new DateTime(2010, 1, 1)
};

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector Minimum="2010-1-1" />

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
{
    Minimum = new DateTime(2010, 1, 1)
};

MinorTicksPerInterval

Gets or sets the value indicating the number of smaller ticks between two major ticks.

For example, if Minimum is 0.0 and Maximum is 10.0 and Interval is 2.0, the slider will render the major ticks at 0.0, 2.0, 4.0 and so on. If MinorTicksPerInterval is 1, then minor ticks will be rendered on 1.0, 3.0 and so on.

Declaration

public int MinorTicksPerInterval { get; set; }

Property Value

Type	Description
System.Int32	Defaults to `0`.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider ShowTicks="True"
                  MinorTicksPerInterval="1" />

SfSlider slider = new SfSlider()
{
   ShowTicks = true,
   MinorTicksPerInterval = 1
};

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider ShowTicks="True"
                          MinorTicksPerInterval="1" />

SfDateTimeSlider slider = new SfDateTimeSlider()
{
   ShowTicks = true,
   MinorTicksPerInterval = 1
};

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider ShowTicks="True"
                       MinorTicksPerInterval="1" />

SfRangeSlider rangeSlider = new SfRangeSlider()
{ 
     ShowTicks = true,
     MinorTicksPerInterval = 1
};

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider ShowTicks="True"
                               MinorTicksPerInterval="1" />

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider()
{ 
     ShowTicks = true,
     MinorTicksPerInterval = 1
};

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector ShowTicks="True"
                         MinorTicksPerInterval="1" />

SfRangeSelector rangeSelector = new SfRangeSelector()
{
     ShowTicks = true,
     MinorTicksPerInterval = 1
};

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector ShowTicks="True"
                                 MinorTicksPerInterval="1" />

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
{
     ShowTicks = true,
     MinorTicksPerInterval = 1
};

MinorTickStyle

Gets or sets a value to customize the appearance of the minor tick shape.

Declaration

public SliderTickStyle MinorTickStyle { get; set; }

Property Value

Type	Description
SliderTickStyle	Defaults to `SliderTickStyle`.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider ShowTicks="True"
                  MinorTicksPerInterval="1">
    <sliders:SfSlider.MinorTickStyle>
        <sliders:SliderTickStyle ActiveFill="Red" 
                                 InactiveFill="Orange" />
    </sliders:SfSlider.MinorTickStyle>
</sliders:SfSlider>

SfSlider slider = new SfSlider()
{
    ShowTicks = true,
    MinorTicksPerInterval = 1
};
slider.MinorTickStyle.ActiveFill = new SolidColorBrush(Colors.Red);
slider.MinorTickStyle.InactiveFill = new SolidColorBrush(Colors.Orange);

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider ShowTicks="True"
                          MinorTicksPerInterval="1">
    <sliders:SfDateTimeSlider.MinorTickStyle>
        <sliders:SliderTickStyle ActiveFill="Red" 
                                 InactiveFill="Orange" />
    </sliders:SfDateTimeSlider.MinorTickStyle>
</sliders:SfDateTimeSlider>

SfDateTimeSlider slider = new SfDateTimeSlider()
{
    ShowTicks = true,
    MinorTicksPerInterval = 1
};
slider.MinorTickStyle.ActiveFill = new SolidColorBrush(Colors.Red);
slider.MinorTickStyle.InactiveFill = new SolidColorBrush(Colors.Orange);

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider ShowTicks="True"
                       MinorTicksPerInterval="1">
    <sliders:SfRangeSlider.MinorTickStyle>
        <sliders:SliderTickStyle ActiveFill="Red" 
                                 InactiveFill="Orange" />
    </sliders:SfRangeSlider.MinorTickStyle>
</sliders:SfRangeSlider>

SfRangeSlider rangeSlider = new SfRangeSlider()
{
    ShowTicks = true,
    MinorTicksPerInterval = 1
};
rangeSlider.MinorTickStyle.ActiveFill = new SolidColorBrush(Colors.Red);
rangeSlider.MinorTickStyle.InactiveFill = new SolidColorBrush(Colors.Orange);

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider ShowTicks="True"
                               MinorTicksPerInterval="1">
    <sliders:SfDateTimeRangeSlider.MinorTickStyle>
        <sliders:SliderTickStyle ActiveFill="Red" 
                                 InactiveFill="Orange" />
    </sliders:SfDateTimeRangeSlider.MinorTickStyle>
</sliders:SfDateTimeRangeSlider>

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider()
{
    ShowTicks = true,
    MinorTicksPerInterval = 1
};
rangeSlider.MinorTickStyle.ActiveFill = new SolidColorBrush(Colors.Red);
rangeSlider.MinorTickStyle.InactiveFill = new SolidColorBrush(Colors.Orange);

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector ShowTicks="True"
                         MinorTicksPerInterval="1">
    <sliders:SfRangeSelector.MinorTickStyle>
        <sliders:SliderTickStyle ActiveFill="Red" 
                                 InactiveFill="Orange" />
    </sliders:SfRangeSelector.MinorTickStyle>
</sliders:SfRangeSelector>

SfRangeSelector rangeSelector = new SfRangeSelector()
{
    ShowTicks = true,
    MinorTicksPerInterval = 1
};
rangeSelector.MinorTickStyle.ActiveFill = new SolidColorBrush(Colors.Red);
rangeSelector.MinorTickStyle.InactiveFill = new SolidColorBrush(Colors.Orange);

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector ShowTicks="True"
                                 MinorTicksPerInterval="1">
    <sliders:SfDateTimeRangeSelector.MinorTickStyle>
        <sliders:SliderTickStyle ActiveFill="Red" 
                                 InactiveFill="Orange" />
    </sliders:SfDateTimeRangeSelector.MinorTickStyle>
</sliders:SfDateTimeRangeSelector>

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector()
{
    ShowTicks = true,
    MinorTicksPerInterval = 1
};
rangeSelector.MinorTickStyle.ActiveFill = new SolidColorBrush(Colors.Red);
rangeSelector.MinorTickStyle.InactiveFill = new SolidColorBrush(Colors.Orange);

ShowDividers

Gets or sets a value indicating whether to show or hide the dividers.

If we enable this property without specifying the Interval, the dividers will be rendered at track start and end.

Declaration

public bool ShowDividers { get; set; }

Property Value

Type	Description
System.Boolean	Defaults to `false`.

Examples

Snippet for SfSlider

XAML
C#

< sliders:SfSlider ShowDividers = "True" />

SfSlider slider = new SfSlider() { ShowDividers = true };

Snippet for SfDateTimeSlider

XAML
C#

< sliders:SfDateTimeSlider ShowDividers = "True" />

SfDateTimeSlider slider = new SfDateTimeSlider() { ShowDividers = true };

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider ShowDividers="True" />

SfRangeSlider rangeSlider = new SfRangeSlider() { ShowDividers = true };

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider ShowDividers="True" />

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider() { ShowDividers = true };

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector ShowDividers="True" />

SfRangeSelector rangeSelector = new SfRangeSelector() { ShowDividers = true };

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector ShowDividers="True" />

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector() { ShowDividers = true };

ShowLabels

Gets or sets a value indicating whether to show or hide the labels.

If we enable this property without specifying the Interval, the labels will be rendered at track start and end.

Declaration

public bool ShowLabels { get; set; }

Property Value

Type	Description
System.Boolean	Defaults to `false`.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider ShowLabels = "True" />

SfSlider slider = new SfSlider() { ShowLabels = true };

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider ShowLabels = "True" />

SfDateTimeSlider slider = new SfDateTimeSlider() { ShowLabels = true };

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider ShowLabels="True" />

SfRangeSlider rangeSlider = new SfRangeSlider() { ShowLabels= true };

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider ShowLabels="True" />

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider() { ShowLabels= true };

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector ShowLabels="True" />

SfRangeSelector rangeSelector = new SfRangeSelector() { ShowLabels = true };

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector ShowLabels="True" />

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector() { ShowLabels = true };

ShowTicks

Gets or sets a value indicating whether to show or hide the ticks.

If we enable this property without specifying the Interval, the ticks will be rendered at track start and end.

Declaration

public bool ShowTicks { get; set; }

Property Value

Type	Description
System.Boolean	Defaults to `false`.

Examples

Snippet for SfSlider

XAML
C#

< sliders:SfSlider ShowTicks = "True" />

SfSlider slider = new SfSlider() { ShowTicks = true };

Snippet for SfDateTimeSlider

XAML
C#

< sliders:SfDateTimeSlider ShowTicks = "True" />

SfDateTimeSlider slider = new SfDateTimeSlider() { ShowTicks = true };

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider ShowTicks="True" />

SfRangeSlider rangeSlider = new SfRangeSlider() { ShowTicks= true };

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider ShowTicks="True" />

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider() { ShowTicks= true };

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector ShowTicks="True" />

SfRangeSelector rangeSelector = new SfRangeSelector() { ShowTicks = true };

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector ShowTicks="True" />

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector() { ShowTicks = true };

ThumbOverlayStyle

Gets or sets a value to customize the appearance of the thumb overlay shape.

Declaration

public SliderThumbOverlayStyle ThumbOverlayStyle { get; set; }

Property Value

Type	Description
SliderThumbOverlayStyle	Defaults to `SliderThumbOverlayStyle`.

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 = 30;

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 = 30;

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 = 30;

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 = 30;

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;

ThumbStyle

Gets or sets a value to customize the appearance of the thumb shape.

Declaration

public SliderThumbStyle ThumbStyle { get; set; }

Property Value

Type	Description
SliderThumbStyle	Defaults to `SliderThumbStyle`.

Examples

Snippet for SfSlider

XAML
C#

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

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

Snippet for SfDateTimeSlider

XAML
C#

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

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

Snippet for SfRangeSlider

XAML
C#

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

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

Snippet for SfDateTimeRangeSlider

XAML
C#

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

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

Snippet for SfRangeSelector

XAML
C#

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

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

Snippet for SfDateTimeRangeSelector

XAML
C#

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

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector();
rangeSelector.ThumbStyle.Radius = 15;
rangeSelector.ThumbStyle.StrokeThickness = 2;

Gets or sets a value to customize the appearance of the tooltip shape.

Declaration

public SliderTooltip Tooltip { get; set; }

Property Value

Type	Description
SliderTooltip	Defaults to `SliderTooltip`.

Snippet for SfSlider

XAML
C#

<sliders:SfSlider>
    <sliders:SfSlider.Tooltip>
        <sliders:SliderTooltip />
    </sliders:SfSlider.Tooltip>
</sliders:SfSlider>

SfSlider slider = new SfSlider() { Tooltip = new() };

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider>
    <sliders:SfDateTimeSlider.Tooltip>
        <sliders:SliderTooltip />
    </sliders:SfDateTimeSlider.Tooltip>
</sliders:SfDateTimeSlider>

SfDateTimeSlider slider = new SfDateTimeSlider() { Tooltip = new() };

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider>
    <sliders:SfRangeSlider.Tooltip>
        <sliders:SliderTooltip />
    </sliders:SfRangeSlider.Tooltip>
</sliders:SfRangeSlider>

SfRangeSlider slider = new SfRangeSlider() { Tooltip = new() };

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider>
    <sliders:SfDateTimeRangeSlider.Tooltip>
        <sliders:SliderTooltip />
    </sliders:SfDateTimeRangeSlider.Tooltip>
</sliders:SfDateTimeRangeSlider>

SfDateTimeRangeSlider slider = new SfDateTimeRangeSlider() { Tooltip = new() };

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector>
    <sliders:SfRangeSlider.Tooltip>
        <sliders:SliderTooltip />
    </sliders:SfRangeSelector.Tooltip>
</sliders:SfRangeSelector>

SfRangeSelector rangeSelecor = new SfRangeSelector() { Tooltip = new() };

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector>
    <sliders:SfDateTimeRangeSelector.Tooltip>
        <sliders:SliderTooltip />
    </sliders:SfDateTimeRangeSelector.Tooltip>
</sliders:SfDateTimeRangeSelector>

SfDateTimeRangeSelector rangeSelecor = new SfDateTimeRangeSelector() { Tooltip = new() };

TrackExtent

Gets or sets the value in pixel for extending track edges.

Declaration

public double TrackExtent { get; set; }

Property Value

Type	Description
System.Double	Defaults to `0.0`.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider TrackExtent="10" />

SfSlider slider = new SfSlider() { TrackExtent = 10 };

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider TrackExtent="10" />

SfDateTimeSlider slider = new SfDateTimeSlider() { TrackExtent = 10 };

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider TrackExtent="10" />

SfRangeSlider rangeSlider = new SfRangeSlider() {  TrackExtent = 10 };

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider TrackExtent="10" />

SfDateTimeRangeSlider rangeSlider = new SfDateTimeRangeSlider() {  TrackExtent = 10 };

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector TrackExtent="10" />

SfRangeSelector rangeSelector = new SfRangeSelector() { TrackExtent = 10 };

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector TrackExtent="10" />

SfDateTimeRangeSelector rangeSelector = new SfDateTimeRangeSelector() { TrackExtent = 10 };

TrackStyle

Gets or sets a value to customize the appearance of the track shape.

Declaration

public SliderTrackStyle TrackStyle { get; set; }

Property Value

Type	Description
SliderTrackStyle	Defaults to `SliderTrackStyle`.

Examples

Snippet for SfSlider

XAML
C#

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

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

Snippet for SfDateTimeSlider

XAML
C#

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

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

Snippet for SfRangeSlider

XAML
C#

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

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

Snippet for SfDateTimeRangeSlider

XAML
C#

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

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

Snippet for SfRangeSelector

XAML
C#

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

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

Snippet for SfDateTimeRangeSelector

XAML
C#

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

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

Methods

ArrangeContent(Rect)

Declaration

protected override Size ArrangeContent(Rect bounds)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.Rect	bounds

Returns

Type
Microsoft.Maui.Graphics.Size

Overrides

SfView.ArrangeContent(Rect)

ChangeVisualState()

Declaration

protected override void ChangeVisualState()

MeasureContent(Double, Double)

Declaration

protected override Size MeasureContent(double widthConstraint, double heightConstraint)

Parameters

Type	Name	Description
System.Double	widthConstraint
System.Double	heightConstraint

Returns

Type
Microsoft.Maui.Graphics.Size

Overrides

SfView.MeasureContent(Double, Double)

OnBindingContextChanged()

Declaration

protected override void OnBindingContextChanged()

Overrides

SfView.OnBindingContextChanged()

OnDraw(ICanvas, RectF)

Declaration

protected override void OnDraw(ICanvas canvas, RectF bounds)

Parameters

Type	Name	Description
Microsoft.Maui.Graphics.ICanvas	canvas
Microsoft.Maui.Graphics.RectF	bounds

Overrides

SfView.OnDraw(ICanvas, RectF)

OnHandlerChanged()

Declaration

protected override void OnHandlerChanged()

Overrides

SfView.OnHandlerChanged()

OnPropertyChanged(String)

Declaration

protected override void OnPropertyChanged(string propertyName)

Parameters

Type	Name	Description
System.String	propertyName

Events

LabelCreated

Represents the LabelCreated event, which occurs when a slider label is created. It is used to format or change the label text.

Declaration

public event EventHandler<SliderLabelCreatedEventArgs> LabelCreated

Event Type

Type	Description
System.EventHandler<SliderLabelCreatedEventArgs>	Defaults to null.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider ShowLabels = "True"
                  LabelCreated="OnLabelCreated">
</sliders:SfSlider>

private void OnLabelCreated(object sender, SliderLabelCreatedEventArgs e)
{
}

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider ShowLabels = "True"
                          LabelCreated="OnLabelCreated">
</sliders:SfDateTimeSlider>

private void OnLabelCreated(object sender, SliderLabelCreatedEventArgs e)
{
}

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider ShowLabels = "True"
                       LabelCreated="OnLabelCreated">
</sliders:SfRangeSlider>

private void OnLabelCreated(object sender, SliderLabelCreatedEventArgs e)
{
}

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider ShowLabels = "True"
                               LabelCreated="OnLabelCreated">
</sliders:SfDateTimeRangeSlider>

private void OnLabelCreated(object sender, SliderLabelCreatedEventArgs e)
{
}

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector ShowLabels = "True"
                         LabelCreated="OnLabelCreated">
</sliders:SfRangeSlider>

private void OnLabelCreated(object sender, SliderLabelCreatedEventArgs e)
{
}

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector ShowLabels = "True"
                                 LabelCreated="OnLabelCreated">
</sliders:SfDateTimeRangeSelector>

private void OnLabelCreated(object sender, SliderLabelCreatedEventArgs e)
{
}

ValueChangeEnd

Represents the ValueChangeEnd event, which occurs when the user completed selecting a new value by tap/mouse up in the thumb.

Declaration

public event EventHandler<EventArgs> ValueChangeEnd

Event Type

Type	Description
System.EventHandler<System.EventArgs>	Defaults to null.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider ValueChangeEnd="OnValueChangeEnd" />

SfSlider slider = new SfSlider();
slider.ValueChangeEnd += OnValueChangeEnd;
private void OnValueChangeEnd(object sender, EventArgs e)
{
}

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider ValueChangeEnd="OnValueChangeEnd" />

SfDateTimeSlider dateTimeSlider = new SfDateTimeSlider();
dateTimeSlider.ValueChangeEnd += OnValueChangeEnd;
private void OnValueChangeEnd(object sender, EventArgs e)
{
}

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider ValueChangeEnd = "OnValueChangeEnd" />

SfRangeSlider rangeSlider = new SfRangeSlider();
rangeSlider.ValueChangeEnd += OnValueChangeEnd;
private void OnValueChangeEnd(object sender, EventArgs e)
{
}

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider ValueChangeEnd = "OnValueChangeEnd" />

SfDateTimeRangeSlider dateTimeRangeSlider = new SfDateTimeRangeSlider();
dateTimeRangeSlider.ValueChangeEnd += OnValueChangeEnd;
private void OnValueChangeEnd(object sender, EventArgs e)
{
}

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector ValueChangeEnd = "OnValueChangeEnd" />

SfRangeSelecor rangeSelector = new SfRangeSelector();
rangeSelector.ValueChangeEnd += OnValueChangeEnd;
private void OnValueChangeEnd(object sender, EventArgs e)
{
}

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector ValueChangeEnd = "OnValueChangeEnd" />

SfDateTimeRangeSelector dateTimeSelector = new SfDateTimeRangeSelector();
rangeSelector.ValueChangeEnd += OnValueChangeEnd;
private void OnValueChangeEnd(object sender, EventArgs e)
{
}

ValueChangeStart

Represents the ValueChangeStart event, which occurs when the user is selecting a new value by tap/mouse down in the thumb.

Declaration

public event EventHandler<EventArgs> ValueChangeStart

Event Type

Type	Description
System.EventHandler<System.EventArgs>	Defaults to null.

Examples

Snippet for SfSlider

XAML
C#

<sliders:SfSlider ValueChangeStart="OnValueChangeStart" />

SfSlider slider = new SfSlider();
slider.ValueChangeStart += OnValueChangeStart;
private void OnValueChangeStart(object sender, EventArgs e)
{
}

Snippet for SfDateTimeSlider

XAML
C#

<sliders:SfDateTimeSlider ValueChangeStart="OnValueChangeStart" />

SfDateTimeSlider dateTimeSlider = new SfDateTimeSlider();
dateTimeSlider.ValueChangeStart += OnValueChangeStart;
private void OnValueChangeStart(object sender, EventArgs e)
{
}

Snippet for SfRangeSlider

XAML
C#

<sliders:SfRangeSlider ValueChangeStart="OnValueChangeStart" />

SfRangeSlider rangeSlider = new SfRangeSlider();
rangeSlider.ValueChangeStart += OnValueChangeStart;
private void OnValueChangeStart(object sender, EventArgs e)
{
}

Snippet for SfDateTimeRangeSlider

XAML
C#

<sliders:SfDateTimeRangeSlider ValueChangeStart="OnValueChangeStart" />

SfDateTimeRangeSlider dateTimeRangeSlider = new SfDateTimeRangeSlider();
dateTimeRangeSlider.ValueChangeStart += OnValueChangeStart;
private void OnValueChangeStart(object sender, EventArgs e)
{
}

Snippet for SfRangeSelector

XAML
C#

<sliders:SfRangeSelector ValueChangeStart="OnValueChangeStart" />

SfRangeSelector rangeSelector = new SfRangeSelector();
rangeSelector.ValueChangeStart += OnValueChangeStart;
private void OnValueChangeStart(object sender, EventArgs e)
{
}

Snippet for SfDateTimeRangeSelector

XAML
C#

<sliders:SfDateTimeRangeSelector ValueChangeStart="OnValueChangeStart" />

SfDateTimeRangeSelector dateTimeSelector = new SfDateTimeRangeSelector();
dateTimeSelector.ValueChangeStart += OnValueChangeStart;
private void OnValueChangeStart(object sender, EventArgs e)
{
}

Implements

IDrawableLayout

Microsoft.Maui.Graphics.IDrawable

Microsoft.Maui.IAbsoluteLayout

Microsoft.Maui.ILayout

Microsoft.Maui.IView

Microsoft.Maui.IElement

Microsoft.Maui.ITransform

Microsoft.Maui.IContainer

System.Collections.Generic.IList<>

System.Collections.Generic.ICollection<>

System.Collections.Generic.IEnumerable<>

System.Collections.IEnumerable

Microsoft.Maui.ISafeAreaView

Microsoft.Maui.IPadding

Microsoft.Maui.ICrossPlatformLayout

Microsoft.Maui.IVisualTreeElement