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: