{"id":13713063,"url":"https://github.com/halkar/xamarin-range-slider","last_synced_at":"2026-01-16T07:48:22.140Z","repository":{"id":60773829,"uuid":"63868028","full_name":"halkar/xamarin-range-slider","owner":"halkar","description":"Range slider for Xamarin and Xamarin.Forms","archived":false,"fork":false,"pushed_at":"2020-09-07T12:21:53.000Z","size":1505,"stargazers_count":89,"open_issues_count":28,"forks_count":50,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-06T05:38:23.945Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.nuget.org/packages/Xamarin.Forms.RangeSlider/","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/halkar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-07-21T12:37:12.000Z","updated_at":"2024-10-15T13:02:45.000Z","dependencies_parsed_at":"2022-10-04T15:29:50.312Z","dependency_job_id":null,"html_url":"https://github.com/halkar/xamarin-range-slider","commit_stats":null,"previous_names":[],"tags_count":62,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halkar%2Fxamarin-range-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halkar%2Fxamarin-range-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halkar%2Fxamarin-range-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/halkar%2Fxamarin-range-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/halkar","download_url":"https://codeload.github.com/halkar/xamarin-range-slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252787159,"owners_count":21804209,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T23:01:26.853Z","updated_at":"2026-01-16T07:48:22.096Z","avatar_url":"https://github.com/halkar.png","language":"C#","funding_links":[],"categories":["UI"],"sub_categories":[],"readme":"[![Build status](https://ci.appveyor.com/api/projects/status/b90itu0lka0fj1sv/branch/master?svg=true)](https://ci.appveyor.com/project/halkar/xamarin-range-slider/branch/master)\n[![Quality Gate](https://sonarqube.com/api/badges/gate?key=XamarinRangeSlider)](https://sonarqube.com/dashboard/index/XamarinRangeSlider)\n# Xamarin.RangeSlider\nWith Xamarin.RangeSlider you can pick ranges in Xamarin and Xamarin.Forms (Android, iOS, UWP, Win8 supported).\nProject is based on https://github.com/anothem/android-range-seek-bar (Android) and on https://github.com/muZZkat/NMRangeSlider (iOS).\n\nYou can find NuGet package [here](https://www.nuget.org/packages/Xamarin.Forms.RangeSlider/). \nVersion without Xamarin.Forms support is available [here](https://www.nuget.org/packages/Xamarin.RangeSlider/).\n\n## If element is not displayed\n\nIf element is not displayed on a Xamarin.Forms page add this code to the startup platform-specific projects.\n\n```csharp\n#if NETFX_CORE\n[assembly: Xamarin.Forms.Platform.WinRT.ExportRenderer(typeof(Xamarin.RangeSlider.Forms.RangeSlider), typeof(Xamarin.RangeSlider.Forms.RangeSliderRenderer))]\n#else\n[assembly: Xamarin.Forms.ExportRenderer(typeof(Xamarin.RangeSlider.Forms.RangeSlider), typeof(Xamarin.RangeSlider.Forms.RangeSliderRenderer))]\n#endif\n```\n\n## Supported Properties\n\n| Name                  | Description | Remarks |\n| --------------------- | ----------- | ---------------|\n| LowerValue            | Current lower value | Two way binding |\n| UpperValue            | Current upper value | Two way binding |\n| MinimumValue          | Minimum value ||\n| MaximumValue          | Maximum value ||\n| MinThumbHidden        | If *true* lower handle is hidden ||\n| MaxThumbHidden        | If *true* upper handle is hidden ||\n| StepValue             | Minimal difference between two consecutive values ||\n| 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. ||\n| BarHeight             | Height of the slider bar | Not supported on iOS |\n| ShowTextAboveThumbs   | Show current values above the thumbs ||\n| TextSize              | Text above the thumbs size | *dp* on Android, *points* on iOS, *pixels* on UWP |\n| TextFormat            | Format string for text above the thumbs ||\n| ActiveColor           | Active bar color | Not supported on iOS. Used for thumb color in Android material UI. |\n| MaterialUI            | Material UI | Only supported on Android |\n| MinThumbTextHidden    | Show current value above the lower handle. Requires ShowTextAboveThumbs to be set to true first\n| MaxThumbTextHidden    | Show current value above the upper handle. Requires ShowTextAboveThumbs to be set to true first\n\n## Supported Events\n\n| Name                  | Description |\n| --------------------- | ----------- | \n| DragStarted           | User started moving one of the thumbs to change value |\n| DragCompleted         | Thumb has been released |\n\n## Supported Delegates\n\n| Name                  | Description |\n| --------------------- | ----------- | \n| FormatLabel           | Provide custom formatting for text above thumbs |\n\n## Screenshots\n\n| Android | iOS | UWP |\n| ---| --- | --- |\n| \u003cimg src=\"https://raw.githubusercontent.com/halkar/xamarin-range-slider/master/Screenshots/android.png\" alt=\"Android\" style=\"width: 300px;\"/\u003e | \u003cimg src=\"https://raw.githubusercontent.com/halkar/xamarin-range-slider/master/Screenshots/ios.png\" alt=\"iOS\" style=\"width: 300px;\"/\u003e | \u003cimg src=\"https://raw.githubusercontent.com/halkar/xamarin-range-slider/master/Screenshots/uwp.png\" alt=\"UWP\" style=\"width: 300px;\"/\u003e |\n\n### Android material UI\n\n\u003cimg src=\"https://raw.githubusercontent.com/halkar/xamarin-range-slider/master/Screenshots/android-material.png\" alt=\"Android\" style=\"width: 50px;\"/\u003e\n\n## Samples\n\n### Sample [project](https://github.com/halkar/xamarin-range-slider/tree/master/Xamarin.RangeSlider.Forms.Samples).\n\n### XAML initialization\n\n```xml\n\u003cforms:RangeSlider x:Name=\"RangeSlider\" MinimumValue=\"1\" MaximumValue=\"100\" LowerValue=\"1\" UpperValue=\"100\" StepValue=\"0\" StepValueContinuously=\"False\" VerticalOptions=\"Center\" TextSize=\"15\" /\u003e\n```\n\n### Displaying dates\n\n```csharp\npublic MainPage()\n{\n    InitializeComponent();\n    RangeSlider.FormatLabel = FormaLabel;\n}\n\nprivate string FormaLabel(Thumb thumb, float val)\n{\n    return DateTime.Today.AddDays(val).ToString(\"d\");\n}\n```\n\n## Customization\n\n### Android\n\n#### Change thumb image\n\n```csharp\nusing Android.Graphics;\nusing Android.Graphics.Drawables;\nusing Xamarin.Forms;\nusing Xamarin.Forms.Platform.Android;\n\n[assembly: ExportEffect(typeof(Droid.Effects.RangeSliderEffect), nameof(Droid.Effects.RangeSliderEffect))]\n\nnamespace Droid.Effects\n{\n    public class RangeSliderEffect : PlatformEffect\n    {\n        protected override void OnAttached()\n        {\n            var themeColor = Xamarin.Forms.Color.Fuchsia.ToAndroid();\n            var ctrl = (Xamarin.RangeSlider.RangeSliderControl)Control;\n            ctrl.ActiveColor = themeColor;\n\n            var thumbImage = new BitmapDrawable(ctrl.ThumbImage);\n            thumbImage.SetColorFilter(new PorterDuffColorFilter(themeColor, PorterDuff.Mode.SrcIn));\n            ctrl.ThumbImage = ConvertToBitmap(thumbImage, ctrl.ThumbImage.Width, ctrl.ThumbImage.Height);\n\n            var thumbPressedImage = new BitmapDrawable(ctrl.ThumbPressedImage);\n            thumbPressedImage.SetColorFilter(new PorterDuffColorFilter(themeColor, PorterDuff.Mode.SrcIn));\n            ctrl.ThumbPressedImage = ConvertToBitmap(thumbPressedImage, ctrl.ThumbPressedImage.Width, ctrl.ThumbPressedImage.Height);\n        }\n\n        protected override void OnDetached()\n        {\n        }\n\n        private static Bitmap ConvertToBitmap(Drawable drawable, int widthPixels, int heightPixels)\n        {\n            var mutableBitmap = Bitmap.CreateBitmap(widthPixels, heightPixels, Bitmap.Config.Argb8888);\n            var canvas = new Canvas(mutableBitmap);\n            drawable.SetBounds(0, 0, widthPixels, heightPixels);\n            drawable.Draw(canvas);\n            return mutableBitmap;\n        }\n    }\n}\n```\n\n#### Change bar color\n\n```csharp\nusing Xamarin.Forms;\nusing Xamarin.Forms.Platform.Android;\n\n[assembly: ExportEffect(typeof(Droid.Effects.RangeSliderEffect), nameof(Droid.Effects.RangeSliderEffect))]\n\nnamespace Droid.Effects\n{\n    public class RangeSliderEffect : PlatformEffect\n    {\n        protected override void OnAttached()\n        {\n            var ctrl = (Xamarin.RangeSlider.RangeSliderControl)Control;\n            ctrl.DefaultColor = Color.Fuchsia.ToAndroid();\n            ctrl.ActiveColor = Color.Aqua.ToAndroid();\n        }\n\n        protected override void OnDetached()\n        {\n        }\n    }\n}\n```\n\n### iOS\n\n#### Change thumb image\n\nJust replace handle images in the `Resources` folder.\n\n#### Change bar color\n\n```csharp\nusing Xamarin.Forms;\nusing Xamarin.Forms.Platform.iOS;\n\n[assembly: ExportEffect(typeof(iOS.Effects.RangeSliderEffect), nameof(iOS.Effects.RangeSliderEffect))]\n\nnamespace iOS.Effects\n{\n    public class RangeSliderEffect : PlatformEffect\n    {\n        protected override void OnAttached()\n        {\n            var ctrl = (Xamarin.RangeSlider.RangeSliderControl)Control;\n            ctrl.TintColor = Color.Fuchsia.ToUIColor();\n        }\n\n        protected override void OnDetached()\n        {\n        }\n    }\n}\n```\n\n## Using Range Slider in native UI\n\n### iOS\n\nJust throw the element on your storyboard in visual editor.\n\n### Android\n\n#### Activity\n\n```csharp\nprotected override void OnCreate(Bundle savedInstanceState)\n{\n    base.OnCreate(savedInstanceState);\n\n    // Set our view from the \"main\" layout resource\n    SetContentView(Resource.Layout.Main);\n\n    var slider = FindViewById\u003cXamarin.RangeSlider.RangeSliderControl\u003e(Resource.Id.slider);\n    slider.SetSelectedMinValue(11);\n    slider.SetSelectedMaxValue(16);\n}\n```\n\n#### .axml\n\n```xml\n\u003c?xml version=\"1.0\" encoding=\"utf-8\"?\u003e\n\u003cLinearLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    xmlns:local=\"http://schemas.android.com/apk/res-auto\"\n    android:orientation=\"vertical\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:minWidth=\"25px\"\n    android:minHeight=\"25px\"\u003e\n    \u003cxamarin.rangeslider.RangeSliderControl\n        android:id=\"@+id/slider\"\n        android:layout_width=\"match_parent\"\n        android:layout_height=\"wrap_content\"\n        local:absoluteMinValue=\"10\"\n        local:absoluteMaxValue=\"20\"\n        local:showRangeLabels=\"false\"\n        local:barHeight=\"1dp\"\n    /\u003e\n\u003c/LinearLayout\u003e\n```\n\nList of available attributes can be found [here](https://github.com/halkar/xamarin-range-slider/blob/master/Xamarin.RangeSlider.Droid/Resources/Values/attrs.xml).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalkar%2Fxamarin-range-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhalkar%2Fxamarin-range-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhalkar%2Fxamarin-range-slider/lists"}