How to customise the Track and Knob of SfRangeSlider

1 min read

Syncfusion RangeSlider provides support to customize the Track and Knob.

To set the color for Track:

Step 1: Set desired color for TrackColor.

Step 2: The Track will be displayed in the color given for TrackColor.

To set the color for TrackSelection:

Step 1: Set desired color for TrackSelectionColor.

Step 2: Selected range in the track will be displayed in the color given for TrackSelectionColor.

To set the color for Knob:

Step 1: Set desired color for KnobColor.

Step 2: Knob will be displayed in the color given for KnobColor.

The below code illustrates the way to achieve this

Code snippet:

XAML:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage 
xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
xmlns:range="clr-namespace:Syncfusion.SfRangeSlider.XForms;assembly=Syncfusion.SfRangeSlider.XForms"
x:Class="RangeSlider.RangeSliderPage">
<range:SfRangeSlider RangeStart="40" RangeEnd="80" ShowRange="True" Minimum="0" Maximum="100" Orientation="Horizontal" KnobColor="Black" TrackColor="Red" TrackSelectionColor="Lime"/>
</ContentPage>

C#:

namespace RangeSlider
{
public partial class RangeSliderPage : ContentPage
{
    public RangeSliderPage()
    {
        InitializeComponent();
        SfRangeSlider rangeSlider = new SfRangeSlider();
        rangeSlider.RangeEnd = 40;
        rangeSlider.RangeStart = 80;
        rangeSlider.ShowRange = true;
        rangeSlider.Minimum = 0;
        rangeSlider.Maximum = 100;
        rangeSlider.Orientation = Orientation.Horizontal;
        rangeSlider.HeightRequest = 400;
        rangeSlider.TrackColor = Color.Red;
        rangeSlider.KnobColor = Color.Black;
        rangeSlider.TrackSelectionColor = Color.Orange;
        this.Content = rangeSlider;
    }
}
}

Image after setting Track color:

Track color in SfRangeSlider