We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add custom labels to RangeSlider.?

Platform: Xamarin.Forms |
Control: SfRangeSlider

To add the Custom Labels in RangeSlider, follow the given steps:


Step 1: Create the RangeSlider sample and include the necessary source files.

Step 2: Create a class and create an instance for SfRangeSlider.

Step 3: Create an observable collection which has a list of Items in it.

Step 4: Call observable collection using Add () method. Inside this method create an instance for Items with Label and Value.

Step 5: Next using RangeSlider instance, set the ShowCustomLabel property to true and set the CustomLabel property to observable collection.

Code snippet:

public class RangeSliderPage : ContentPage    {        SfRangeSlider rangeSlider;         ObservableCollection<Items>  customCollection;        public RangeSliderPage ()        {            customCollection = new ObservableCollection<Items> ();            customCollection.Add(new Items(){Label = "Min", Value= 0});            customCollection.Add(new Items() { Label = "Max", Value = 100 });
            rangeSlider = new SfRangeSlider ();            rangeSlider.HeightRequest = 400;            rangeSlider.ShowCustomLabel = true;            rangeSlider.CustomLabels = customCollection; 
            this.Content = GetRangeSlider();        }        private StackLayout GetRangeSlider()        {            var mainStack=new StackLayout            {                Children = {RangeSlider}            };            return mainStack;        }    } 


The following screenshot shows the RangeSlider with CustomLabel:

SfRangeSlider custom labels

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
You must log in to leave a comment
Gonzalo Parra
Feb 27, 2019

Is there a way to display a collection of only custom labels??


Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile