How to Change the Color of Slider on Xamarin.Forms, on Android, iOs, UWP using custom renderers?

Question

I have changed successfully the color of the Slider on Android creating a Custom Renderer Here the example.

[assembly: ExportRenderer(typeof(CustomSlider), typeof(CustomSliderRenderer))]
namespace ForteMultiplataform.Droid
{
    public class CustomSliderRenderer : SliderRenderer
    {
        public CustomSliderRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Slider> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                string colorSlider = "#008000";
                Control.ProgressDrawable.SetColorFilter(Xamarin.Forms.Color.FromHex(colorSlider).ToAndroid(), PorterDuff.Mode.SrcIn);

            // Set Progress bar Thumb color
            Control.Thumb.SetColorFilter(
                Xamarin.Forms.Color.FromHex(colorSlider).ToAndroid(),
                PorterDuff.Mode.SrcIn);
            }
        }
    }
}

How to achieve that for iOS, and UWP?

protected override void OnElementChanged(ElementChangedEventArgs<Slider> e)
{
    base.OnElementChanged(e);

    if (e.NewElement != null)
    {
        string colorSlider = "#008000";
        //What do I put here??
    }
}

Answer 1

iOS Custom Renderer

According to the Apple Docs , UISlider has three properties for which we'll need to update:

• MaximumTrackTintColor
  • Specifies the tint color of the track to the leading side of the slider's thumb. The value defaults to the slider's inherited tint color. Access this value at runtime with the minimumTrackTintColor property.
• MinimumTrackTintColor
  • Specifies the tint color of the track to the trailing side of the slider's thumb. Access this value at runtime with the maximumTrackTintColor property.
• ThumbTintColor
  • Controls the tint color of the slider's thumb. Access this value at runtime with the thumbTintColor property

Code

[assembly: ExportRenderer(typeof(CustomSlider), typeof(CustomSliderRenderer))]
namespace CustomSliderColor.iOS
{
    public class CustomSliderRenderer : SliderRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Slider> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                const string colorSlider = "#008000";

                Control.MaximumTrackTintColor = Color.FromHex(colorSlider).ToUIColor();
                Control.MinimumTrackTintColor = Color.FromHex(colorSlider).ToUIColor();
                Control.ThumbTintColor = Color.FromHex(colorSlider).ToUIColor();
            }
        }
    }
}

Answer 2

UWP Custom Renderer

In your App.xaml class you create your own Style for the Slider, Add an Application.Resources tag with your Slider Style

<Application
    x:Class="ForteMultiplataform.UWP.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ForteMultiplataform.UWP"
    RequestedTheme="Light">
    <Application.Resources>
        <ResourceDictionary>
            <Style x:Key="styledSlider" TargetType="Slider">
                <Setter Property="Background" Value="#0C720B"/>
                <Setter Property="BorderBrush" Value="#129E11"/>
                <Setter Property="BorderThickness" Value="2"/>
                <Setter Property="Foreground" Value="#24DB23"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Slider">
                            <Grid Margin="{TemplateBinding Padding}">
                                <Grid.Resources>
                                    <Style x:Key="SliderThumbStyle" TargetType="Thumb">
                                        <Setter Property="BorderThickness" Value="2"/>
                                        <Setter Property="BorderBrush" Value="#0C720B"/>
                                        <Setter Property="Foreground" Value="#129E11"/>
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="Thumb">
                                                    <Ellipse StrokeThickness="2" Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Foreground}"/>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </Grid.Resources>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Grid x:Name="SliderContainer" Background="Transparent" Grid.Row="1">
                                    <Grid x:Name="HorizontalTemplate">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="*"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="17"/>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="17"/>
                                        </Grid.RowDefinitions>
                                        <Rectangle x:Name="HorizontalTrackRect" Grid.ColumnSpan="3" Fill="{TemplateBinding Background}" Grid.Row="1" Height="10" RadiusX="5" RadiusY="5"/>
                                        <Rectangle x:Name="HorizontalDecreaseRect" Fill="{TemplateBinding Background}" Grid.Row="1" Height="10" RadiusX="5" RadiusY="5"/>
                                        <Rectangle x:Name="HorizontalBorder" Grid.ColumnSpan="3" Grid.Row="1" Stroke="{TemplateBinding BorderBrush}"
                            StrokeThickness="{TemplateBinding BorderThickness}" Height="10" RadiusX="5" RadiusY="5"/>
                                        <Thumb x:Name="HorizontalThumb" AutomationProperties.AccessibilityView="Raw" Background="{ThemeResource SliderThumbBackgroundThemeBrush}"
                            Grid.Column="1" DataContext="{TemplateBinding Value}" Grid.Row="1" Style="{StaticResource SliderThumbStyle}" Height="25" Width="25"/>
                                    </Grid>
                                    <Grid x:Name="VerticalTemplate" Visibility="Collapsed">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="17"/>
                                            <ColumnDefinition Width="Auto"/>
                                            <ColumnDefinition Width="17"/>
                                        </Grid.ColumnDefinitions>
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="*"/>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="Auto"/>
                                        </Grid.RowDefinitions>
                                        <Rectangle x:Name="VerticalTrackRect" Grid.Column="1" Fill="{TemplateBinding Background}" Grid.RowSpan="3" Width="10" RadiusX="5" RadiusY="5"/>
                                        <Rectangle x:Name="VerticalDecreaseRect" Grid.Column="1" Fill="{TemplateBinding Background}" Grid.Row="2"/>
                                        <Rectangle x:Name="VerticalBorder" Grid.RowSpan="3" Grid.Column="1"  Stroke="{TemplateBinding BorderBrush}"
                            StrokeThickness="{TemplateBinding BorderThickness}" Width="10" RadiusX="5" RadiusY="5" />
                                        <Thumb x:Name="VerticalThumb" AutomationProperties.AccessibilityView="Raw" Background="{ThemeResource SliderThumbBackgroundThemeBrush}"
                            Grid.Column="1" DataContext="{TemplateBinding Value}" Grid.Row="1" Style="{StaticResource SliderThumbStyle}" Height="15" Width="25"/>
                                    </Grid>
                                </Grid>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </Application.Resources>

</Application>

Then in your custom renderer load this style

[assembly: ExportRenderer(typeof(CustomSlider), typeof(CustomSliderRenderer))]
namespace ForteMultiplataform.UWP
{
    public class CustomSliderRenderer : SliderRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Slider> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null)
            {
                Windows.UI.Xaml.Style sliderStyle = (Windows.UI.Xaml.Style)Windows.UI.Xaml.Application.Current.Resources["styledSlider"];
                Control.Style = sliderStyle;
            }
        }
    }
}

Answer 3

Track colors are also available directly in the Xamarin.Forms

Slider.MaximumTrackColor = Color.Red
Slider.MinimumTrackColor = Color.Green
Slider.ThumbColor        = Color.Blu

They will be rendered in the different platforms accordingly.

Answer 4

I just realized that on Android is also possible to change the propery "colorAccent" on the "styles.xml" file of your Xamarin.Android project:

<item name="colorAccent">#008000</item>

This will also change the color of another GUI components like Switch for example.