What is the use of the ShowRange property of the SfRangeSlider?
The ShowRange property is a Boolean property of the SfRangeSlider to show the RangeStart and RangeEnd instead of a single value.
When the ShowRange property is set to True, it shows the selected range for the SfRangeSlider depending on the RangeStart and RangeEnd values.
When the ShowRange property is set to False, the RangeEnd and RangeStart are not reflected in the selected range, it considers only the value of the SfRangeSlider to set the Range in the SfRangeSlider.
The same has been demonstrated using the following code example.
XAML
//Code explains how to set the ShowRange property for the SfRangeSlider when it value as true <Window x:Class="SfRangeSlider.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:syncfusion="http://schemas.syncfusion.com/wpf" Title="MainWindow" Height="350" Width="525"> <Grid Name="grid1"> <StackPanel Orientation="Vertical"> <TextBlock Text="ShowRange Value True" Width="150"></TextBlock> <syncfusion:SfRangeSlider Height="40" Width="300" RangeStart="8" RangeEnd="20" ShowRange="True"> </syncfusion:SfRangeSlider> </StackPanel> </Grid> </Window>
C#
//Code explains how to set the ShowRange property for the SfRangeSlider when it value as true public MainWindow() { InitializeComponent(); StackPanel stack1 = new StackPanel(); stack1.Orientation = Orientation.Vertical; TextBlock Text1 = new TextBlock(); Text1.Text = "ShowRange Value True"; Text1.Width = 150; SfRangeSlider RangeSlider = new SfRangeSlider(); //Code shows how to set the ShowRange property to true RangeSlider.ShowRange = true; RangeSlider.Width = 300; RangeSlider.Height = 40; RangeSlider.RangeStart = 8; RangeSlider.RangeEnd = 20; stack1.Children.Add(Text1); stack1.Children.Add(RangeSlider); grid1.Children.Add(stack1); }
Output:
The following screenshot shows how the Range of the SfRangeSlider, shown when the ShowRange property’s value is True.
Figure 1: ShowRange as True
XAML
//Code explains how to set the ShowRange property for the SfRangeSlider when it value as false <Window x:Class="SfRangeSlider.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:syncfusion="http://schemas.syncfusion.com/wpf" Title="MainWindow" Height="350" Width="525"> <Grid Name="grid1"> <StackPanel Orientation="Vertical"> <TextBlock Text="ShowRange Value False” Width="150"></TextBlock> <syncfusion:SfRangeSlider Height="40" Width="300" ShowRange="False" Value="25"> </syncfusion:SfRangeSlider> </StackPanel> </Grid> </Window>
C#
// Code explains how to set the ShowRange property for the SfRangeSlider when it value as false public MainWindow() { InitializeComponent(); StackPanel stack1 = new StackPanel(); stack1.Orientation = Orientation.Vertical; TextBlock Text1 = new TextBlock(); Text1.Text = "ShowRange Value False"; Text1.Width = 150; SfRangeSlider RangeSlider = new SfRangeSlider(); //Code shows how to set the ShowRange property to false RangeSlider.ShowRange = false; RangeSlider.Width = 300; RangeSlider.Height = 40; RangeSlider.Value =25; stack1.Children.Add(Text1); stack1.Children.Add(RangeSlider); grid1.Children.Add(stack1); }
Output:
The following screenshot shows how the Range of the SfRangeSlider, shown when the ShowRange property’s value is False.
Figure 2: ShowRange as False