Range slider for Xamarin and Xamarin.Forms
halkar Merge pull request #137 from MikeW1986/master
Support for different Thumbsizes
Latest commit c7a3ba1 May 14, 2018
Permalink
Failed to load latest commit information.
Screenshots docs Mar 18, 2018
Xamarin.RangeSlider.Common #17 #30 added FormatLabel method. Dec 4, 2016
Xamarin.RangeSlider.Droid added UpdateThumbValues to setter May 4, 2018
Xamarin.RangeSlider.Forms.Droid Added PlatformEffect for Android and redraw Seekbar for different Thu… Apr 23, 2018
Xamarin.RangeSlider.Forms.Samples removed CustomThumbImage property, split UpdateThumbImages in 2 funct… May 2, 2018
Xamarin.RangeSlider.Forms.UWP Added support for active color for UWP. Mar 18, 2018
Xamarin.RangeSlider.Forms.iOS updating nuget packages Sep 3, 2017
Xamarin.RangeSlider.Forms Docs and code cleanup. Mar 18, 2018
Xamarin.RangeSlider.UWP hiding thumb text when thumb is hidden Apr 3, 2018
Xamarin.RangeSlider.iOS Merge remote-tracking branch 'origin/master' into correct-stop-with-n… Dec 23, 2017
.gitignore Removed redundant files. Aug 23, 2016
GitVersion.yml #76 GitVersion Aug 6, 2017
ISSUE_TEMPLATE.md Create ISSUE_TEMPLATE.md Nov 11, 2017
LICENSE Initial commit Jul 21, 2016
README.md docs Mar 18, 2018
RangeSliderInitialization.cs #45 fixed renderer initialization for WinRT. Feb 5, 2017
Xamarin.Forms.RangeSlider.nuspec removed init class Oct 24, 2017
Xamarin.RangeSlider.Full.sln migrating to vs 2017 Sep 5, 2017
Xamarin.RangeSlider.nuspec removed init class Oct 24, 2017
Xamarin.RangeSlider.sln migrating to vs 2017 Sep 5, 2017
appveyor.yml attempt to fix build Sep 5, 2017
build.cake sonarbuild v4 Oct 4, 2017
build.cmd Added cake script. Aug 22, 2016
build.ps1 fix build Mar 10, 2018
build.sh Fixed cake build. Aug 23, 2016

README.md

Build status Quality Gate

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

Name Description Remarks
LowerValue Current lower value Two way binding
UpperValue Current upper value Two way binding
MinimumValue Minimum value
MaximumValue Maximum value
MinThumbHidden If true lower handle is hidden
MaxThumbHidden If true upper handle is hidden
StepValue Minimal difference between two consecutive values
StepValueContinuously If false the slider will move freely with the touch. When the touch ends, the value will snap to the nearest step value. If true the slider will stay in its current position until it reaches a new step value.
BarHeight Height of the slider bar Not supported on iOS
ShowTextAboveThumbs Show current values above the thumbs
TextSize Text above the thumbs size dp on Android, points on iOS, pixels on UWP
TextFormat Format string for text above the thumbs
ActiveColor Active bar color Not supported on iOS. Used for thumb color in Android material UI.
MaterialUI Material UI Only supported on Android

Supported Events

Name Description
DragStarted User started moving one of the thumbs to change value
DragCompleted Thumb has been released

Supported Delegates

Name Description
FormatLabel Provide custom formatting for text above thumbs

Screenshots

Android iOS UWP
Android iOS UWP

Android material UI

Android

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.