Xamarin.RangeSlider

With Xamarin.RangeSlider you can pick ranges in Xamarin and Xamarin.Forms (Android, iOS, UWP, Win8 supported). Project is based on https://github.com/anothem/android-range-seek-bar (Android) and on https://github.com/muZZkat/NMRangeSlider (iOS).

You can find NuGet package here. Version without Xamarin.Forms support is available here.

If element is not displayed

If element is not displayed on a Xamarin.Forms page add this code to the startup platform-specific projects.

#if NETFX_CORE
[assembly: Xamarin.Forms.Platform.WinRT.ExportRenderer(typeof(Xamarin.RangeSlider.Forms.RangeSlider), typeof(Xamarin.RangeSlider.Forms.RangeSliderRenderer))]
#else
[assembly: Xamarin.Forms.ExportRenderer(typeof(Xamarin.RangeSlider.Forms.RangeSlider), typeof(Xamarin.RangeSlider.Forms.RangeSliderRenderer))]
#endif

Supported Properties

Supported Events

Supported Delegates

Screenshots

Android	iOS	UWP

Android material UI

Samples

Sample project.

XAML initialization

<forms:RangeSlider x:Name="RangeSlider" MinimumValue="1" MaximumValue="100" LowerValue="1" UpperValue="100" StepValue="0" StepValueContinuously="False" VerticalOptions="Center" TextSize="15" />

Displaying dates

public MainPage()
{
    InitializeComponent();
    RangeSlider.FormatLabel = FormaLabel;
}

private string FormaLabel(Thumb thumb, float val)
{
    return DateTime.Today.AddDays(val).ToString("d");
}

Customization

Android

Change thumb image

using Android.Graphics;
using Android.Graphics.Drawables;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportEffect(typeof(Droid.Effects.RangeSliderEffect), nameof(Droid.Effects.RangeSliderEffect))]

namespace Droid.Effects
{
    public class RangeSliderEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            var themeColor = Xamarin.Forms.Color.Fuchsia.ToAndroid();
            var ctrl = (Xamarin.RangeSlider.RangeSliderControl)Control;
            ctrl.ActiveColor = themeColor;

            var thumbImage = new BitmapDrawable(ctrl.ThumbImage);
            thumbImage.SetColorFilter(new PorterDuffColorFilter(themeColor, PorterDuff.Mode.SrcIn));
            ctrl.ThumbImage = ConvertToBitmap(thumbImage, ctrl.ThumbImage.Width, ctrl.ThumbImage.Height);

            var thumbPressedImage = new BitmapDrawable(ctrl.ThumbPressedImage);
            thumbPressedImage.SetColorFilter(new PorterDuffColorFilter(themeColor, PorterDuff.Mode.SrcIn));
            ctrl.ThumbPressedImage = ConvertToBitmap(thumbPressedImage, ctrl.ThumbPressedImage.Width, ctrl.ThumbPressedImage.Height);
        }

        protected override void OnDetached()
        {
        }

        private static Bitmap ConvertToBitmap(Drawable drawable, int widthPixels, int heightPixels)
        {
            var mutableBitmap = Bitmap.CreateBitmap(widthPixels, heightPixels, Bitmap.Config.Argb8888);
            var canvas = new Canvas(mutableBitmap);
            drawable.SetBounds(0, 0, widthPixels, heightPixels);
            drawable.Draw(canvas);
            return mutableBitmap;
        }
    }
}

Change bar color

using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportEffect(typeof(Droid.Effects.RangeSliderEffect), nameof(Droid.Effects.RangeSliderEffect))]

namespace Droid.Effects
{
    public class RangeSliderEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            var ctrl = (Xamarin.RangeSlider.RangeSliderControl)Control;
            ctrl.DefaultColor = Color.Fuchsia.ToAndroid();
            ctrl.ActiveColor = Color.Aqua.ToAndroid();
        }

        protected override void OnDetached()
        {
        }
    }
}

iOS

Change thumb image

Just replace handle images in the Resources folder.

Change bar color

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ExportEffect(typeof(iOS.Effects.RangeSliderEffect), nameof(iOS.Effects.RangeSliderEffect))]

namespace iOS.Effects
{
    public class RangeSliderEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            var ctrl = (Xamarin.RangeSlider.RangeSliderControl)Control;
            ctrl.TintColor = Color.Fuchsia.ToUIColor();
        }

        protected override void OnDetached()
        {
        }
    }
}

Using Range Slider in native UI

iOS

Just throw the element on your storyboard in visual editor.

Android

Activity

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);

    // Set our view from the "main" layout resource
    SetContentView(Resource.Layout.Main);

    var slider = FindViewById<Xamarin.RangeSlider.RangeSliderControl>(Resource.Id.slider);
    slider.SetSelectedMinValue(11);
    slider.SetSelectedMaxValue(16);
}

.axml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minWidth="25px"
    android:minHeight="25px">
    <xamarin.rangeslider.RangeSliderControl
        android:id="@+id/slider"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        local:absoluteMinValue="10"
        local:absoluteMaxValue="20"
        local:showRangeLabels="false"
        local:barHeight="1dp"
    />
</LinearLayout>

List of available attributes can be found here.