Xamarin.Forms Custom Slider

Hello My Xamarin Friends,

welcome back to my new post, today i would like to talk about xamarin forms CustomSlider, so let's start,

Slider is  the input control for a linear value. 
So we will first create a class whose name "CustomSlider" and then we will write a code in "C #"

	public class CustomSlider : Slider
	{
	public static readonly BindableProperty MaxColorProperty =
	BindableProperty.Create(nameof(MaxColor),
	typeof(Color), typeof(CustomSlider),
	Color.Default);
	public Color MaxColor
	{
	get { return (Color)GetValue(MaxColorProperty); }
	set { SetValue(MaxColorProperty, value); }
	}
	public static readonly BindableProperty MinColorProperty =
	BindableProperty.Create(nameof(MinColor),
	typeof(Color), typeof(CustomSlider),
	Color.Default);
	public Color MinColor
	{
	get { return (Color)GetValue(MinColorProperty); }
	set { SetValue(MinColorProperty, value); }
	}
	public static readonly BindableProperty ThumbColorProperty =
	BindableProperty.Create(nameof(ThumbColor),
	typeof(Color), typeof(CustomSlider),
	Color.Default);
	public Color ThumbColor
	{
	get { return (Color)GetValue(ThumbColorProperty); }
	set { SetValue(ThumbColorProperty, value); }
	}
	public static readonly BindableProperty ThumbImageProperty =
	BindableProperty.Create(nameof(ThumbImage),
	typeof(string),
	typeof(CustomSlider),
	string.Empty);
	public string ThumbImage
	{
	get { return (string)GetValue(ThumbImageProperty); }
	set { SetValue(ThumbImageProperty, value); }
	}
	}

view raw CustomSlider.cs hosted with ❤ by GitHub

Now we can write some code in android project for set

	public class MySliderRenderer : SliderRenderer
	{
	protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Slider> e)
	{
	base.OnElementChanged(e);
	if (e.OldElement != null || e.NewElement == null)
	return;
	var view = (CustomSlider)Element;
	if (!string.IsNullOrEmpty(view.ThumbImage)||
	view.ThumbColor != Xamarin.Forms.Color.Default ||
	view.MaxColor != Xamarin.Forms.Color.Default ||
	view.MinColor != Xamarin.Forms.Color.Default)
	{
	// Set Thumb Icon
	Control.SetThumb(Resources.GetDrawable(view.ThumbImage));
	}
	Control.Thumb.SetColorFilter(view.ThumbColor.ToAndroid(), PorterDuff.Mode.SrcIn);
	Control.ProgressTintList = Android.Content.Res.ColorStateList.ValueOf(view.MinColor.ToAndroid());
	Control.ProgressTintMode = PorterDuff.Mode.SrcIn;
	//this is for Maximum Slider line Color
	Control.ProgressBackgroundTintList = Android.Content.Res.ColorStateList.ValueOf(view.MaxColor.ToAndroid());
	Control.ProgressBackgroundTintMode = PorterDuff.Mode.SrcIn;
	}
	protected override void OnLayout(bool changed, int l, int t, int r, int b)
	{
	base.OnLayout(changed, l, t, r, b);
	if (Android.OS.Build.VERSION.SdkInt >= Android.OS.BuildVersionCodes.JellyBean)
	{
	if (Control == null)
	{
	return;
	}
	SeekBar ctrl = Control;
	Drawable thumb = ctrl.Thumb;
	int thumbTop = ctrl.Height / 2 - thumb.IntrinsicHeight / 2;
	thumb.SetBounds(thumb.Bounds.Left, thumbTop,
	thumb.Bounds.Left + thumb.IntrinsicWidth, thumbTop + thumb.IntrinsicHeight);
	}
	}
	}
	}

view raw MySliderRenderer.cs hosted with ❤ by GitHub

Then we create in Ios Project Also

	public class MySliderRenderer : SliderRenderer
	{
	protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Slider> e)
	{
	base.OnElementChanged(e);
	if (e.OldElement != null || e.NewElement == null)
	return;
	var view = (CustomSlider)Element;
	if (!string.IsNullOrEmpty(view.ThumbImage)||
	view.ThumbColor != Xamarin.Forms.Color.Default ||
	view.MaxColor != Xamarin.Forms.Color.Default ||
	view.MinColor != Xamarin.Forms.Color.Default)
	{
	//Assigns a thumb image to the specified control states.
	Control.SetThumbImage(UIImage.FromFile(view.ThumbImage), UIControlState.Normal);
	}
	// Set Progress bar Thumb color
	Control.ThumbTintColor = view.ThumbColor.ToUIColor();
	//this is for Minimum Slider line Color
	Control.MinimumTrackTintColor = view.MinColor.ToUIColor();
	//this is for Maximum Slider line Color
	Control.MaximumTrackTintColor = view.MaxColor.ToUIColor();
	}
	}

view raw CustomSlider.cs hosted with ❤ by GitHub

Please make sure add view reference.....
xmlns:local="clr-namespace:CustomSliderApp"
then write xaml code in main page.

	<StackLayout Padding="20">
	<Label Text="Custom Slider" FontSize="Large"/>
	<cs:CustomSlider x:Name="customSlider"
	MaxColor="Red"
	MinColor="Yellow"
	ThumbImage="icon.png"
	/>
	<cs:CustomSlider MaxColor="Red"
	MinColor="Yellow"
	ThumbColor="Black"
	ThumbImage="icon.png"/>
	</StackLayout>

view raw MainPage.xaml hosted with ❤ by GitHub

TADDAAAA!

You should have your CustomSlider working!!
If You want to watch related video click Here Custom Rendered Slider

Public Property of Slider:-

1. Maximum Double. =(Maximum="100")
2. Minimum Double. =(Minimum="0")
3. Value Double. =(Value="20")

Features of CustomSlider controls:-

1. Custom Max Color Property=(MaxColor="Red")
2. Custom Min Color Property=(MinColor="Yellow")
3. Custom ThumbColor Radius Property=(ThumbColor="Black")
4. Custom ThumbImage Property=(ThumbImage="icon.png")