Articles in this section
Category / Section

How to add custom labels to RangeSlider.?

1 min read

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

Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Please sign in to leave a comment