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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to add custom labels to RangeSlider.?

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.


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:


Article ID: Published Date: Last Revised Date: Platform: Control:
7063 08/26/2016 08/26/2016 Xamarin.Forms SfRangeSlider
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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