Forum Xamarin Cross Platform with Xamarin

Slider - Customization


I'm trying to figure out how to customize the appearance of a Slider.

I modified the ExtendedSlider (Xamarin Forms Labs) to include the parameters I want to customize (mainly colors of the thumb button and min/max sides of the slider by adding the code as follows:

// setup bindable color customizations

    public static readonly BindableProperty ThumbColorProperty = 
        BindableProperty.Create<ExtendedSlider, Color>(p => p.ThumbColor, Color.White);

    public Color ThumbColor { 
        get{return (Color)GetValue(ThumbColorProperty);}
        set{ SetValue(ThumbColorProperty, value);}

    public static readonly BindableProperty MinSideColorProperty =
       BindableProperty.Create<ExtendedSlider, Color>(p => p.MinSideColor, Color.Purple);

    public Color MinSideColor
        get { return (Color)GetValue(MinSideColorProperty); }
        set { SetValue(MinSideColorProperty, value); }

    public static readonly BindableProperty MaxSideColorProperty =
    BindableProperty.Create<ExtendedSlider, Color>(p => p.MaxSideColor, Color.Purple);

    public Color MaxSideColor
        get { return (Color)GetValue(MaxSideColorProperty); }
        set { SetValue(MaxSideColorProperty, value); }

I then added a Custom Renderer (for Android):

public class ExtendedSliderRenderer : SliderRenderer
public ExtendedSliderRenderer() { }

    protected override void OnElementChanged(ElementChangedEventArgs<Slider> e)

        if (e.OldElement != null || this.Element == null)

        ExtendedSlider extendedSlider = (ExtendedSlider)this.Element; // customized object with properties

        // control is 

        if (null != Control) { 

       /// WHAT DO I DO HERE??



Any help is appreciated


  • AminLaljiAminLalji CAMember

    Any ideas??

  • AminLaljiAminLalji CAMember

    Hi All - Can anybody provide an example of how to change the color of a slider?

  • DevinSmithDevinSmith GBUniversity ✭✭
    edited April 2015

    Hi Amin,

    here is a piece of code that changes the slider bar color in a custom renderer.

    protected override void OnElementChanged(ElementChangedEventArgs e)
    if (Control != null)
    Control.ProgressDrawable.SetColorFilter(Android.Graphics.Color.Red, PorterDuff.Mode.SrcIn);

    You can use Control.SetThumb(new DrawableContainer()) to customize the thumb component.

    I hope this helps.

    Xamarin Certified Developer

  • BenPattinsonBenPattinson USMember ✭✭

    Adding to @DevinSmith's answer, if you just want to change the color, you can do the same to the thumb, so I used:

               Control.ProgressDrawable.SetColorFilter(Android.Graphics.Color.Red, PorterDuff.Mode.SrcIn);
               Control.Thumb.SetColorFilter(Android.Graphics.Color.Red, PorterDuff.Mode.SrcIn);    
  • WarinthornSWarinthornS THMember

    @Ben Pattinson I have a question to ask you Please help me

    Control.Thumb >>> I want to change the image.What do I have to do
    Thank you.

Sign In or Register to comment.