Basic Features in WinUI RangeSlider

18 Nov 201811 minutes to read

This section explains how to work with the basic features of the WinUI RangeSlider control.

Refer to the getting started documentation for information on installing the NuGet package, adding namespace references, and adding the SfRangeSlider control to your application.

Setting Minimum and Maximum Values

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

The RangeStart value must be greater than or equal to Minimum, and the RangeEnd value must be less than or equal to Maximum. Values set outside the Minimum and Maximum range will be adjusted to the nearest boundary.

<slider:SfRangeSlider Minimum="-20"
                      Maximum="20"
                      RangeStart="-10"
                      RangeEnd="10"
                      ShowLabels="True" />
SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.Minimum = -20;
sfRangeSlider.Maximum = 20;
sfRangeSlider.RangeStart = -10;
sfRangeSlider.RangeEnd = 10;
sfRangeSlider.ShowLabels = true;
this.Content = sfRangeSlider;

Range slider with minimum and maximum customization

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.

<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

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

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

Discrete Selection for Values

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

The StepFrequency property is supported only for numeric values; it is not supported for date or time values.

<slider:SfRangeSlider Minimum="0"
                      Maximum="10"
                      Interval="2"
                      RangeStart="2"
                      RangeEnd="8"
                      StepFrequency="2"
                      ShowTicks="True"
                      ShowLabels="True" />
SfRangeSlider 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

Values

You can show values in the range slider by setting double values to the RangeStart and RangeEnd properties.

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      ShowLabels="True" />
SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.RangeStart = 30;
sfRangeSlider.RangeEnd = 70;
sfRangeSlider.ShowLabels = true;
this.Content = sfRangeSlider;

Setting value to range slider

Dragging the Active Range

You can drag the active range in the range slider by setting the CanDragActiveRange property as true. The default value of CanDragActiveRange is false.

The LabelOffset property is used to set the distance between the labels and the range slider.

<slider:SfRangeSlider RangeStart="40"
                      RangeEnd="60"
                      CanDragActiveRange="True"
                      ShowLabels="True"
                      LabelOffset="10"  />
SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.RangeStart = 40;
sfRangeSlider.RangeEnd = 60;
sfRangeSlider.CanDragActiveRange = true;
sfRangeSlider.ShowLabels = true;
sfRangeSlider.LabelOffset = 10;
this.Content = sfRangeSlider;

Range slider with range dragging

Flow Direction Customization

The direction of the range slider can be customized by its IsInversed property. The default value of IsInversed is false.

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

<slider:SfRangeSlider ShowTicks="True"
                      ShowLabels="True"
                      Interval="20"
                      RangeStart="40"
                      RangeEnd="60"
                      IsInversed="True"/>
SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.ShowTicks = true;
sfRangeSlider.ShowLabels = true;
sfRangeSlider.Interval = 20;
sfRangeSlider.RangeStart = 40;
sfRangeSlider.RangeEnd = 60;
sfRangeSlider.IsInversed = true;
this.Content = sfRangeSlider;

Range slider with is inversed customization

Vertical Range Slider

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

When the Orientation property is Vertical, the range slider will be rendered in a bottom-to-top vertical direction.

<slider:SfRangeSlider Orientation="Vertical"
                      ShowTicks="True"
                      ShowLabels="True"
                      Interval="20"
                      RangeStart="40"
                      RangeEnd="60" />
SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.Orientation = Orientation.Vertical;
sfRangeSlider.ShowTicks = true;
sfRangeSlider.ShowLabels = true;
sfRangeSlider.Interval = 20;
sfRangeSlider.RangeStart = 40;
sfRangeSlider.RangeEnd = 60;
this.Content = sfRangeSlider;

Range slider with orientation customization

Events

RangeValueChanged

The RangeValueChanged event occurs each time a RangeStart or RangeEnd value changes. You can get the following values in the event args:

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      RangeValueChanged="SfRangeSlider_RangeValueChanged"/>
SfRangeSlider sfRangeSlider = new SfRangeSlider();
sfRangeSlider.RangeStart = 30;
sfRangeSlider.RangeEnd = 70;
sfRangeSlider.RangeValueChanged += SfRangeSlider_RangeValueChanged;
this.Content = sfRangeSlider;

private void SfRangeSlider_RangeValueChanged(object sender, RangeValueChangedEventArgs e)
{
    var rangeStartOldValue = e.RangeStartOldValue;
    var rangeStartNewValue = e.RangeStartNewValue;
    var rangeEndOldValue = e.RangeEndOldValue;
    var rangeEndNewValue = e.RangeEndNewValue;
}