Basic Features in WinUI Slider

26 May 20217 minutes to read

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

Setting Minimum and Maximum value

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

<slider:SfSlider Minimum="-20"
                 Maximum="20"
                 ShowLabels="True" />
SfSlider sfSlider = new SfSlider();
sfSlider.Minimum = -20;
sfSlider.Maximum = 20;
sfSlider.ShowLabels = true;
this.Content = sfSlider;

Slider with minimum and maximum customization

Interval

Slider elements like labels, ticks, and divisors 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 divisors at 0, 2, 4 and so on.

<slider:SfRangeSlider Minimum="0"
                      Maximum="10"
                      Interval="2"
                      RangeStart="2"
                      RangeEnd="8"
                      ShowTicks="True"
                      ShowLabels="True" />
SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.Minimum = 0;
sfRangeSlider.Maximum = 10;
sfRangeSlider.Interval = 2;
sfRangeSlider.RangeStart = 2;
sfRangeSlider.RangeEnd = 8;
sfRangeSlider.ShowTicks = true;
sfRangeSlider.ShowLabels = true;
this.Content = sfRangeSlider;

Range slider with interval customization

NOTE

Slider having auto-interval support. So, the auto-interval is calculated by default.

NOTE

  • Refer the ShowDivisors, to know more about the rendering of divisors at given interval.
  • Refer the ShowTicks, to know more about the rendering of major ticks at given interval.
  • Refer the ShowLabels, to know more about the rendering of labels at given interval.

Discrete Selection for Values

You can move the thumb in discrete manner for numeric values using the StepFrequency property in the range slider.

<slider:SfRangeSlider Minimum="0"
                      Maximum="10"
                      Interval="2"
                      RangeStart="2"
                      RangeEnd="8"
                      StepFrequency="2"
                      ShowTicks="True"
                      ShowLabels="True" />
SfSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.Minimum = 0;
sfRangeSlider.Maximum = 10;
sfRangeSlider.Interval = 2;
sfRangeSlider.RangeStart = 2;
sfRangeSlider.RangeEnd = 8;
sfRangeSlider.StepFrequency = 2;
sfRangeSlider.ShowTicks = true;
sfRangeSlider.ShowLabels = true;
this.Content = sfRangeSlider;

Range slider with step frequency

Value

You can show value in the slider by setting double value to the Value properties.

<slider:SfSlider Value="50"
                 ShowLabels="True" />
SfSlider sfSlider = new SfSlider();
sfSlider.Value = 50;
sfSlider.ShowLabels = true;
this.Content = sfSlider;

Setting value to slider

Flow Direction Customization

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

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

<slider:SfSlider ShowTicks="True"
                 ShowLabels="True"
                 Interval="20"
                 Value="40"
                 IsInversed="True"/>
SfSlider sfSlider = new SfSlider();
sfSlider.ShowTicks = true;
sfSlider.ShowLabels = true;
sfSlider.Interval = 20;
sfSlider.Value = 40;
sfSlider.IsInversed = true;
this.Content = sfSlider;

Slider with is inversed customization

Events

ValueChanged

The ValueChanged event occurs each time when a Value gets changed. 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.
<slider:SfSlider Value="50"
                 ValueChanged="SfSlider_ValueChanged" />
private void SfSlider_ValueChanged(object sender, SliderValueChangedEventArgs e)
{
    var oldValue = e.OldValue;
    var newValue = e.NewValue;
}