Slider¶

The Slider is a simple sliding control that mimics those found on other mobile platforms. It is flexible in its look and feel and can be used to track various values across your app.

Slider

Properties¶

ProgressThickness - double¶

Gets or sets the thickness of the progress slider. Default is 12d.

ProgressColor - Color¶

Gets or sets the progress color. Default is Xamarin.Forms.Color.Default.

EndCapType - EndCapType¶

Gets or sets the end cap type. Default is Rounded.

ProgressBackgroundColor - Color¶

Gets or sets the progress background color. Xamarin.Forms.Color.Default.

ThumbColor - Color¶

Gets or sets the thumb color. Default is White.

TouchedAnimationDuration - uint¶

Gets or sets the duration of the touched animation. Default is 240u.

TouchedAnimationEasing - Easing¶

Gets or sets the easing of the touched animation. Default is CubicInOut.

Minimum - double¶

Gets or sets the minimum value. Default is 0d.

Maximum - double¶

Gets or sets the maximum value. Default is 100d.

Value - double¶

Gets or sets the value. Default is 0d.

Example Usage¶

Xaml¶

<aurora:Slider x:Name="slider" ThumbColor="White" ProgressColor="Green" ProgressBackgroundColor="White" />

C#¶

var slider = new Slider
{
    Minimum = 20,
    Maximum = 150,
    ProgressColor = Color.Orange,
    ThumbColor = Color.Red
};

Example Styles¶

A slider with ThumbColor of Blue, ProgressColor of Red, ProgressThickness of 20 and ProgressBackgroundColor of Gray:

Example1

var slider = new Slider
{
    ProgressThickness = 20,
    ProgressBackgroundColor = Color.Gray,
    ProgressColor = Color.Red,
    ThumbColor = Color.Blue
};

<aurora:Slider x:Name="slider" ThumbColor="Blue" ProgressColor="Red" ProgressBackgroundColor="Gray" ProgressThickness="20" />

A slider with ThumbColor of Yellow, ProgressColor of Green and ProgressBackgroundColor of Gray:

Example2

var slider = new Slider
{
    ProgressBackgroundColor = Color.Gray,
    ProgressColor = Color.Green,
    ThumbColor = Color.Yellow
};

<aurora:Slider x:Name="slider" ThumbColor="Yellow" ProgressColor="Green" ProgressBackgroundColor="Gray" />