Basic Features in WinUI Slider

18 Nov 20187 minutes to read

This section explains how to add the WinUI slider with basic features.

Setting Minimum and Maximum Values

The Minimum and Maximum properties of a Slider are used to customize the start and end range of the Slider. The default value of Minimum is 0 and Maximum is 100.

XAML

<slider:SfSlider Minimum="-20"
                 Maximum="20"
                 ShowLabels="True" />

C#

using Syncfusion.UI.Xaml.Sliders;

SfSlider sfSlider = new SfSlider();
sfSlider.Minimum = -20;
sfSlider.Maximum = 20;
sfSlider.ShowLabels = true;
this.Content = sfSlider;

Interval

Slider elements like labels, ticks, and dividers are rendered based on the Interval, Minimum, and Maximum properties. The default value of Interval is double.NaN.

For example, if Minimum is 0, Maximum is 10, and Interval is 2, the slider will render the labels, major ticks, and dividers at 0, 2, 4 and so on.

XAML

<slider:SfSlider Minimum="0"
                 Maximum="10"
                 Interval="2"
                 Value="4"
                 ShowTicks="True"
                 ShowLabels="True" />

C#

SfSlider sfSlider = new SfSlider();
sfSlider.Minimum = 0;
sfSlider.Maximum = 10;
sfSlider.Interval = 2;
sfSlider.Value = 4;
sfSlider.ShowTicks = true;
sfSlider.ShowLabels = true;
this.Content = sfSlider;

The slider has auto-interval support. So, the auto-interval is calculated by default.

• Refer to the ShowDividers to learn more about the rendering of dividers at the given interval.
• Refer to the ShowTicks to learn more about the rendering of major ticks at the given interval.
• Refer to the ShowLabels to learn more about the rendering of labels at the given interval.

Discrete Selection for Values

You can move the thumb in a discrete manner for numeric values using the StepFrequency property of the SfSlider.

XAML

<slider:SfSlider Minimum="0"
                 Maximum="10"
                 Interval="2"
                 Value="4"
                 StepFrequency="2"
                 ShowTicks="True"
                 ShowLabels="True" />

C#

SfSlider sfSlider = new SfSlider();
sfSlider.Minimum = 0;
sfSlider.Maximum = 10;
sfSlider.Interval = 2;
sfSlider.Value = 2;
sfSlider.StepFrequency = 2;
sfSlider.ShowTicks = true;
sfSlider.ShowLabels = true;
this.Content = sfSlider;

Value

You can set the slider’s value using the Value property. The default value of Value is 0 and the value is clamped to the Minimum and Maximum range.

XAML

<slider:SfSlider Value="50"
                 ShowLabels="True" />

C#

SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.ShowLabels = true;
this.Content = sfSlider;

Inverse Direction

The direction of the slider can be customized by its IsInversed property.

When the IsInversed property is true, the slider is placed in a right-to-left direction. When the IsInversed property is set to false, the slider is positioned in a left-to-right direction.

XAML

<slider:SfSlider ShowTicks="True"
                 ShowLabels="True"
                 Interval="20"
                 Value="40"
                 IsInversed="True"/>

C#

SfSlider sfSlider = new SfSlider();
sfSlider.ShowTicks = true;
sfSlider.ShowLabels = true;
sfSlider.Interval = 20;
sfSlider.Value = 40;
sfSlider.IsInversed = true;
this.Content = sfSlider;

Vertical Slider

The orientation of the slider can be changed by using the Orientation property. The default value of Orientation is Horizontal.

When the Orientation property is Vertical, the slider will be rendered vertically (bottom-to-top).

XAML

<slider:SfSlider Orientation="Vertical"
                 ShowTicks="True"
                 ShowLabels="True"
                 Interval="20"
                 Value="40" />

C#

SfSlider sfSlider = new SfSlider();
sfSlider.Orientation = Orientation.Vertical;
sfSlider.ShowTicks = true;
sfSlider.ShowLabels = true;
sfSlider.Interval = 20;
sfSlider.Value = 40;
this.Content = sfSlider;

Events

ValueChanged

The ValueChanged event occurs each time the Value changes. You can get the following values in this event args:

• OldValue – Gets the previous value of a range value property.
• NewValue – Gets the new value of a range value property.

XAML

<slider:SfSlider Value="50"
                 ValueChanged="SfSlider_ValueChanged" />

C#

private void SfSlider_ValueChanged(object sender, SliderValueChangedEventArgs e)
{
    var oldValue = e.OldValue;
    var newValue = e.NewValue;
}