How to provide custom label support to SfRangeSlider in Xamarin.Forms application?
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:
|
