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:
