Articles in this section
Category / Section

How to provide custom label support to SfRangeSlider in Xamarin.Forms application?

1 min read

Syncfusion RangeSlider in Xamarin provides the CustomLabel support.

 

To display CustomLabel in SfRangeSlider, use the following steps:

 

Step 1: Set the label for the value for which custom label has to be set.

 

Step 2: Set ShowCustomLabel to True.

 

The following code illustrates how to achieve this way.

 

Code Snippet:

 

XAML code to display CustomLabel:

 

 

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
xmlns:range="clr-namespace:Syncfusion.SfRangeSlider.XForms;assembly=Syncfusion.SfRangeSlider.XForms"
x:Class="RangeSlider_.RangeSlider_Page">
<range:SfRangeSlider x:Name="rangeslider" Minimum="0" Maximum="100" ShowCustomLabel="true" />
</ContentPage>
 

 

 

C# code to set labels:

 

namespace RangeSlider_
{
public partial class RangeSlider_Page : ContentPage
{
    ObservableCollection<Items> customCollection;
 
    public RangeSlider_Page()
    {
        InitializeComponent();
 
 
 
 
        customCollection = new ObservableCollection<Items>();
        customCollection.Add(new Items() { Label = "Minimum", Value = 0 });
        customCollection.Add(new Items() { Label = "Maximum", Value = 80 });
 
        rangeslider.CustomLabels = customCollection;
    }
}
}
 

 

 

C# code to display CustomLabel:

 

namespace RangeSlider_
{
public partial class RangeSlider_Page : ContentPage
{
    ObservableCollection<Items> customCollection;
 
    public RangeSlider_Page()
    {
        InitializeComponent();
 
        SfRangeSlider rangeSlider = new SfRangeSlider();
        rangeSlider.ShowRange = true;
        rangeSlider.Minimum = 0;
        rangeSlider.Maximum = 100;
        customCollection = new ObservableCollection<Items>();
        customCollection.Add(new Items() { Label = "Minimum", Value = 0 });
        customCollection.Add(new Items() { Label = "Maximum", Value = 80 });
        rangeSlider.HeightRequest = 400;
        rangeSlider.ShowCustomLabel = true;
        rangeSlider.CustomLabels = customCollection;
        this.Content = rangeSlider;
    }
}
}

 

Image after CustomLabel is set:

 

 

CustomLabel in SfRangeSlider

 

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