Customizing ticks

27 Jun 20192 minutes to read

Tick marks can be placed along the track in a uniform manner or it’s position can also be customized.

TickPlacement

The TickPlacement property determines where to draw tick marks in relation to the track. Available options for this property are,

  • BottomRight

  • Inline

  • None

  • Outside

  • TopLeft

NOTE

The default option is Inline.

BottomRight

Tick marks are placed either below the track in horizontal orientation or right of the track in vertical orientation.

  • C#
  • rangeSlider.TickPlacement=TickPlacement.BottomRight;

    TickPlacement BottomRight Xamarin.Android

    TopLeft

    Tick marks are placed either above the track in horizontal orientation or left of the track in vertical orientation.

  • C#
  • rangeSlider.TickPlacement=TickPlacement.TopLeft;

    TickPlacement TopLeft Xamarin.Android

    Inline

    Tick marks are placed along the track.

  • C#
  • rangeSlider.TickPlacement=TickPlacement.Inline;

    Tick marks Inline Xamarin.Android

    Outside

    Tick marks are placed on both sides of the track either in horizontal or vertical orientation.

  • C#
  • rangeSlider.TickPlacement=TickPlacement.Outside;

    Tick marks Outline Xamarin.Android

    Customizing tick color

    The range slider control provides the TickColor property to customize the color of ticks in tick bar.

  • C#
  • namespace GettingStarted
    {
          [Activity(Label = "GettingStarted", MainLauncher = true, Icon = "@mipmap/icon")]
          public class MainActivity : Activity
          {
                protected override void OnCreate(Bundle savedInstanceState)
                {
    				base.OnCreate(savedInstanceState);
    				LinearLayout linearLayout = new LinearLayout(this);
    				linearLayout.LayoutParameters = new LayoutParams(LayoutParams.MatchParent, LayoutParams.MatchParent);
    				SfRangeSlider rangeSlider = new SfRangeSlider(this);
    				rangeSlider.ShowValueLabel = true;
    				rangeSlider.TickColor = Color.Rgb(255, 0, 0);
    				rangeSlider.TickPlacement = TickPlacement.TopLeft;
    				rangeSlider.Orientation = Com.Syncfusion.Sfrangeslider.Orientation.Horizontal;
    				linearLayout.AddView(rangeSlider);
    				SetContentView(linearLayout);
                }
          }
    }

    Customizing tick color Xamarin.Android

    Tick length

    The TickLength property used to customize the length of the ticks.

  • C#
  • rangeSlider.TickLength = 20;