Range Slider | Xamarin.Forms | Xamarin Community Toolkit
Hello friends, today I’d like to show you one interesting thing which we will unpack from the Xamarin Community Toolkit box.
And this thing is RangeSlider. This control allows picking a range of values instead of a single value as standard Slider does. This control is 100% cross-platform, so it looks the same on all platforms.
Let’s start!
- First of all, we need to add Xamarin.CommunityToolkit to all of our Xamarin.Forms projects (including platform-specific ones iOS, Android, UWP, etc.).
- Navigate to the Xaml file where you are going to use RangeSlider and add the next namespace (It can be a C# file as well, but in this example, I want to focus on how to use it in Xaml).
xmlns:xct="http://xamarin.com/schemas/2020/toolkit"- Now we can use RangeSlider
That’s how a basic example looks like
But the good news this control is highly customizable
Here is the list of all available properties which will help you to adjust RangeSlider to your needs/design.
double MinimumValue; // Minimum allowed value
double MaximumValue; // Maximum allowed value
double StepValue; // Value step
double LowerValue; // Current lower value
double UpperValue; // Current upper value// Thumb customization
double ThumbSize;
double LowerThumbSize;
double UpperThumbSize;
Color ThumbColor;
Color LowerThumbColor;
Color UpperThumbColor;
Color ThumbBorderColor;
Color LowerThumbBorderColor;
Color UpperThumbBorderColor;
double ThumbRadius;
double LowerThumbRadius;
double UpperThumbRadius;
View LowerThumbView;
View UpperThumbView;// Track customization
double TrackSize;
Color TrackColor;
Color TrackHighlightColor;
Color TrackBorderColor;
Color TrackHighlightBorderColor;
double TrackRadius;// Value labels customization
Style ValueLabelStyle;
Style LowerValueLabelStyle;
Style UpperValueLabelStyle;
string ValueLabelStringFormat;
double ValueLabelSpacing;
Let’s customize our example a bit to show how easy we can play with the RangeSlider’s appearance!
GitHub link: https://github.com/AndreiMisiukevich/RangeSliderSample
Today we checked out RangeSlider. I hope this article will help you to start using this control in your awesome Xamarin.Forms applications.
Thanks for reading!
