38 ratings
  • 1
  • 2
  • 3
  • 4
  • 5
5 star 4
4 star 19
3 star 4
2 star 10
1 star 1
Compatible with
  • Android
  • iOS

Range Slider 1.1.0.3

Xamarin Inc

A slider control with two handles, allowing users to specify two values in a range.

RangeSlider is a slider control with two handles, allowing users to specify two values in a range. RangeSlider supports iOS and Android, and is styled to look like a native slider control on each platform.

Adding a RangeSliderView to your iOS app

using RangeSlider;
...

public override void ViewDidLoad ()
{
  base.ViewDidLoad ();  

  var slider = new RangeSliderView {
    Frame = new RectangleF (50, View.Center.Y - 140, View.Frame.Width - 100, 40))
  };

  slider.LeftValueChanged += value => Console.WriteLine ("Left value: {0}", value);
  slider.RightValueChanged += value => Console.WriteLine ("Right value: {0}", value);

  View.AddSubview (slider);
}

Adding a RangeSliderView to your Android app

using RangeSlider;
...

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

  var slider = new RangeSliderView (this);
  slider.LeftValueChanged += value => {
    Console.WriteLine ("Left value: {0}", value);
  };

  AddContentView (slider, new ViewGroup.LayoutParams (
    ViewGroup.LayoutParams.FillParent, ViewGroup.LayoutParams.FillParent));
}

To get slider values use LeftValue and RightValue:

var lowBound = slider.LeftValue;
var highBound = slider.RightValue;

Release Notes

Version 1.1.0.3

  • [Bugfix] Slider is nested in a subview with a pan gesture recognizer
  • [Bugfix] LeftValue and RightValue did not update the slider positions
Write a Review

20 reviews

Shahdeh khodavandi rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

I really want to change the color of Tracker in Range slider mode, please add it +1

Posted on: July 19, 2016 / Version: 1.1.0.3
armin design rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

Is there way to change coloring of RangeSlider? +1

Posted on: July 19, 2016 / Version: 1.1.0.3
Igor Perkovsky rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

Is there way to change coloring? +1

Posted on: July 1, 2016 / Version: 1.1.0.3
Adriano Cordeiro rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

Is there way to change coloring? +1

Posted on: April 25, 2016 / Version: 1.1.0.3
Ivan Bykov rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

Is there way to change coloring?

Posted on: March 17, 2016 / Version: 1.1.0.2
Neelam

how to set different different min & max values for multiple range-sliders?

Posted on: February 4, 2016 / Version: 1.1.0.3
Roger Schmidlin rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

I wrote my custom renderer to use this control in Forms. Changing the right and left value properties doesn't update the slider. Would be great to use it in Forms directly out of the box.

Posted on: January 27, 2016 / Version: 1.1.0.3
Trigma Solutions rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

Nice control but no use if we can't slightly customize it like to change color of indicator or increase Width area.

Please do provide some customize version of it then It will be a 5 star control :)

Posted on: August 20, 2015 / Version: 1.1.0.2
Adrian Seceleanu rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

Very useful component. Thank you for the effort :)

I am using this with the android material theme, unfortunately the style used by this component still looks like 'Holo'. Is there any way to remedy this?

Posted on: July 20, 2015 / Version: 1.1.0.2
Martin Moser rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

Is there a way to change the track color of the slider?

Posted on: June 25, 2015 / Version: 1.1.0.2
André Gonçalves

It would be very useful to have access to the code... because this is deprecated (the bullets are from a older version of ios and we can't change them....) Can xamarin provide a GIT with this please?

Posted on: May 11, 2015 / Version: 1.1.0.2
SudhirT rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

is it possible to use this control with Xamarin.forms as custom renderer?

Posted on: March 1, 2015 / Version: 1.1.0.2
Yaroslav Yuzyk rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

Nice control, Thanks for this. How to customize this Android control? I can't find 'SetThumbImage' method. I want to set thumb image, background and progress.

Posted on: April 1, 2014 / Version: 1.0
Jamal Zafer rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

I was having an issue "image is null" in Release configuration, So For those who are receiving an error: "a parameter 'image' is null." ... Note that I have resolved the issue by Cleaning the project and running again in Release Configuration, it's working fine now.

Posted on: March 27, 2014 / Version: 1.0
mark gamache

I noticed that dragging too fast will 'lose' the thumb control.

Posted on: March 14, 2014 / Version: 1.0
chaitanya rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

Nice control, Thanks for this.

But i want to set thumb image for left & right thumb, do we have any way to set thumb image like we do in normal slider with help of "SetThumbImage" method ? Also i want to change tint color but did not found any way to do this in this control. Do we have options for above items or can add these options to this control ?

Posted on: October 16, 2013 / Version: 1.0
Magnus Ahlin rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

I had a problem where the left value didnt move initially but it went away

Posted on: October 15, 2013 / Version: 1.0
Steve Berneman rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

Was working just fine, but now I'm getting an exception when I try to instantiate. Saying a parameter 'image' is null. Control won't load.

Posted on: August 29, 2013 / Version: 1.0
Aranda Morrison rates this with
  • 1
  • 2
  • 3
  • 4
  • 5

Nice looking control and easy to use.

One fairly significant problem is that the hit area for dragging the control points seems to be offset upwards. It felt like the dragging was very unreliable until I worked out I had to drag above the control point. Please fix this up and I'll re-review with 5 stars!.

I didn't have the problem that Srikanth has reported - although I only set the initial left and right values before adding the slider to the parent view.

Also, be nice to make the control addable to the toolbox for the Xamarin Studio iOS designer.

Posted on: August 13, 2013 / Version: 1.0
SRIKANTH DEVARAJAN

the left and right values have no effect when assigned via code. The slider defaults to 0, and max.

Posted on: May 1, 2013 / Version: 1.0