Articles in this section
Category / Section

What are the events present in SfRangeSlider

1 min read

Syncfusion RangeSlider in Xamarin provides RangeChanging and ValueChanging event to know the position of the thumb where it is placed.

RangeChanging event is used when the ShowRange is enabled condition.

ValueChanging event is used when the ShowRange is disabled condition.

 

To set RangeChanging and ValueChanging event follow the given procedure below:

 

For ValueChanging event:

 

Step 1: Create a SfRangeSlider on the content page, where use an entry to display the value changed which is mentioned in the XAML code.

 

Step 2: Enter the ValueChanging event at the C# code.

 

For RangeChanging event:

 

Step 1: Create a SfRangeSlider on the content page, where use two entry to display the start and end value of the range slider.

 

Step 2: Enter the RangeChanging event at the C# code.

 

The below code illustrates the way to achieve this.

 

Code for ValueChanging Event:

 

XAML Code:

<StackLayout VerticalOptions="Center" HeightRequest="500">
<range:SfRangeSlider x:Name="rangeSlider" ShowRange="false" />
  <Grid Padding="30">
        <Grid.ColumnDefinitions>
                <ColumnDefinition Width="2*" />
                <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
                <RowDefinition Height="2*" />
        </Grid.RowDefinitions>
<Entry x:Name="entry" Grid.Row="0" Grid.Column="1"  />
    <Label Text="Value Changed" Grid.Row="0" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" Grid.Column="0" />
 
    </Grid>
</StackLayout> 
 

C# Code:

namespace RangeSlider
{
public partial class RangeSliderPage : ContentPage
{
    public RangeSliderPage()
    {
        InitializeComponent();
        rangeSlider.ValueChanging += (sender, e) =>
        {
            entry.Text = e.RangeSlider.Value.ToString();
        };
    }
}
}
 

 

Code for RangeChanging Event:

 

XAML Code:

<StackLayout VerticalOptions="Center" HeightRequest="500">
<range:SfRangeSlider x:Name="rangeSlider" ShowRange="true" />
<Grid Padding="30">
      <Grid.ColumnDefinitions>
              <ColumnDefinition Width="2*" />
              <ColumnDefinition Width="1*" />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
              <RowDefinition Height="2*" />
      <RowDefinition Height="2*" />
      </Grid.RowDefinitions>
<Entry x:Name="entry" Grid.Row="0" Grid.Column="1"  />
  <Entry x:Name="entry1" Grid.Row="1" Grid.Column="1"  />
  <Label Text="Range Start" Grid.Row="0" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" Grid.Column="0" />
  <Label Text="Range End" Grid.Row="1" HorizontalTextAlignment="Start" VerticalTextAlignment="Center" Grid.Column="0" />
  </Grid>
</StackLayout> 
 

C# Code:

 
namespace RangeSliderKB
{
public partial class RangeSliderKBPage : ContentPage
{
    public RangeSliderKBPage()
    {
        InitializeComponent();
        rangeSlider.RangeChanging += (sender, e) =>
        {
            entry.Text = e.RangeSlider.RangeStart.ToString();
            entry1.Text = e.RangeSlider.RangeEnd.ToString();
        };
    }
}
}

 

Image for Value Change Event:

 

Image for Range Change Event:

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied