Wednesday, 8 April 2015

Range Slider Renderer for Xamarin.Forms

Based on the Range Slider component in the Xamarin Components store, I have created a renderer so that the Range Slider can be used in Xamarin.Forms.

Firstly, I created a RangeSlider control in the Xamarin.Forms PCL, as follows :-
using Xamarin.Forms;

namespace RangeSliderSample
{
 public class RangeSlider : View
 {
  public static readonly BindableProperty LeftValueProperty =
   BindableProperty.Create(p => p.LeftValue, 0f);

  public float LeftValue
  {
   get { return (float) GetValue(LeftValueProperty); }
   set { SetValue(LeftValueProperty, value); }
  }

  public static readonly BindableProperty RightValueProperty =
   BindableProperty.Create(p => p.RightValue, 0f);

  public float RightValue
  {
   get { return (float) GetValue(RightValueProperty); }
   set { SetValue(RightValueProperty, value); }
  }

  public static readonly BindableProperty MaxValueProperty =
   BindableProperty.Create(p => p.MaxValue, 1f);

  public float MaxValue
  {
   get { return (float) GetValue(MaxValueProperty); }
   set { SetValue(MaxValueProperty, value); }
  }

  public static readonly BindableProperty MinValueProperty =
   BindableProperty.Create(p => p.MinValue, 0f);

  public float MinValue
  {
   get { return (float) GetValue(MinValueProperty); }
   set { SetValue(MinValueProperty, value); }
  }

  public static readonly BindableProperty StepProperty =
   BindableProperty.Create(p => p.Step, 0f);

  public float Step
  {
   get { return (float) GetValue(StepProperty); }
   set { SetValue(StepProperty, value); }
  }
 }
}

I then placed this control on a XAML page :-

 
  
  
  
 



I then created a Custom Renderer in the Android project :-
using RangeSlider;
using RangeSliderSample.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(RangeSliderSample.RangeSlider), typeof(RangeSliderRenderer))]
namespace RangeSliderSample.Droid
{
 public class RangeSliderRenderer : ViewRenderer
 {
  private RangeSliderView _slider;
  
  protected override void OnElementChanged(ElementChangedEventArgs e)
  {
   base.OnElementChanged(e);

   var rangeSlider = e.NewElement as RangeSlider;

   if (rangeSlider != null)
   {
    _slider = new RangeSliderView(Context, rangeSlider.MinValue, rangeSlider.MaxValue, rangeSlider.Step);

    _slider.LeftValueChanged += value =>
    {
     rangeSlider.LeftValue = _slider.LeftValue;
    };

    _slider.RightValueChanged += value =>
    {
     rangeSlider.RightValue = _slider.RightValue;
    };

    SetNativeControl(_slider);
   }
  }
 }
}

The complete solution is here :-
http://www.smartmobiledevice.co.uk/Samples/Xamarin/RangeSliderSample.zip

5 comments:

  1. Hi Paul, really helpful post. I've downloaded the code and got it working in my project. One thing I've noticed it's the background properties in the RangeSlider class are never used, did you get that working or did you end up realizing it was not possible?

    Thanks!

    ReplyDelete
  2. Hello Paul. Same here. I used your sample. I can't change the values of left and right values in forms -> no effect. Any ideas on that?
    Thanks

    ReplyDelete
  3. I am facing an error for iOS project. "Value cannot be null.Parameter name: image". I am not using any images.

    ReplyDelete