How to place thumb at certain position on loading.
Syncfusion RangeSlider provides support to place the thumb at certain position on loading.
To Place the single thumb at certain position on loading:
Step 1: Set desired value to the Value Property, and set ShowRange to False.
Step 2: Single will be placed on the position based on the value given for Value property.
To Place the dual thumb at certain position on loading:
Step 1: Set Values for RangeStart and RangeEnd, and set ShowRange to True.
Step 2: Thumb will be placed on the position based on the values given for RangeStart and RangeEnd, respectively.
The following code illustrates how to achieve this way.Code snippet:
XAML: code to place single thumb at certain position on loading:
<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:range="clr-namespace:Syncfusion.SfRangeSlider.XForms;assembly=Syncfusion.SfRangeSlider.XForms" x:Class="RangeSlider.RangeSliderPage"> <range:SfRangeSlider ShowRange="False" Minimum="0" Maximum="100" Value="50" Orientation="Horizontal"/> </ContentPage
C# :code to place single thumb at certain position on loading:
namespace RangeSlider
{
public partial class RangeSliderPage : ContentPage
{
public RangeSliderPage()
{
InitializeComponent();
SfRangeSlider rangeSlider = new SfRangeSlider();
rangeSlider.Value = 50;
rangeSlider.ShowRange = false;
rangeSlider.Minimum = 0;
rangeSlider.Maximum = 100;
rangeSlider.Orientation = Orientation.Horizontal;
rangeSlider.HeightRequest = 400;
this.Content = rangeSlider;
}
}
}
XAML code to place dual thumb at certain position on loading:
<?xml version="1.0" encoding="utf-8"?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:range="clr-namespace:Syncfusion.SfRangeSlider.XForms;assembly=Syncfusion.SfRangeSlider.XForms" x:Class="RangeSlider.RangeSliderPage"> <range:SfRangeSlider RangeStart="40" RangeEnd="80" ShowRange="True" Minimum="0" Maximum="100" Orientation="Horizontal"/> </ContentPage>
C# code to place dual thumb at certain position on loading:
namespace RangeSlider
{
public partial class RangeSliderPage : ContentPage
{
public RangeSliderPage()
{
InitializeComponent();
SfRangeSlider rangeSlider = new SfRangeSlider();
rangeSlider.RangeStart = 40;
rangeSlider.RangeEnd = 80;
rangeSlider.ShowRange = true;
rangeSlider.Minimum = 0;
rangeSlider.Maximum = 100;
rangeSlider.Orientation = Orientation.Horizontal;
rangeSlider.HeightRequest = 400;
this.Content = rangeSlider;
}
}
}
Image after setting single thumb on certain position on loading:
|
Image after setting dual thumb on certain position on loading:
|
