Basic Features in WinUI RangeSlider (Range Slider)

30 Jun 202110 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 RangeSlider is used to customize the start and end range of the RangeSlider. The default value of Minimum is 0 and Maximum is 100.

<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

NOTE

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

NOTE

  • Refer the ShowDividers, to know more about the rendering of dividers 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 slider.

<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 Active Range

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

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

Range slider with range dragging

Flow Direction Customization

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

When the IsInversed property is true, the range slider can be placed in right-to-left direction. When the IsInversed property is set to false, the range slider will be positioned in 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 range slider can be changed by using the Orientation property.

When the Orientation property is Vertical, the range slider will be rendered in 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 when a RangeStart or RangeEnd value gets changed. You can get the following values in this event args:

<slider:SfRangeSlider RangeStart="30"
                      RangeEnd="70"
                      RangeValueChanged="SfRangeSlider_RangeValueChanged"/>
private void SfRangeSlider_RangeValueChanged(object sender, RangeValueChangedEventArgs e)
{
    var rangeStartOldValue = e.RangeStartOldValue;
    var rangeStartNewValue = e.RangeStartNewValue;
    var rangeEndOldValue = e.RangeEndOldValue;
    var rangeEndNewValue = e.RangeEndNewValue;
}