How to move the knob step by step instead of continuously
Syncfusion RangeSlider in Xamarin provides the knob to move step by step values
To make the Knob to move based on tick frequency:
Step 1: Set SnapsTo property to Ticks
Step 2: The knob will move based on the value given to the TickFrequency.
To make the knob to move based on StepValues:
Step 1: Set SnapsTo property to StepValues
Step 2: The knob will move based on the value given to the StepFrequency.
To make the knob without any range:
Step 1: Set SnapsTo property to None
Step 2: The knob will move anywhere without any range.
The below code illustrates the way to achieve this.
XAML code to set SnapsTo value to Ticks:
<?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_customlabel.RangeSlider">
<ContentPage.Content> <range:SfRangeSlider x:Name="rangeSlider" BackgroundColor="Silver" RangeEnd="40" RangeStart="0" ShowRange="True" Minimum="0" Maximum="80" SnapsTo="Ticks" TickFrequency="4" ValuePlacement="BottomRight" />
</ContentPage.Content>
|
C# code to set SnapsTo value to Ticks:
namespace RangeSlider { public partial class RangeSlider : ContentPage {
SfRangeSlider rangeSlider = new SfRangeSlider();
public RangeSlider() { InitializeComponent();
StackLayout stack = new StackLayout();
stack.BackgroundColor = Color.White; rangeSlider.HorizontalOptions = LayoutOptions.FillAndExpand; rangeSlider.VerticalOptions = LayoutOptions.FillAndExpand; rangeSlider.BackgroundColor = Color.Silver; rangeSlider.RangeEnd = 40; rangeSlider.RangeStart = 4; rangeSlider.ShowRange = true; rangeSlider.Minimum = 0; rangeSlider.Maximum = 80; rangeSlider.SnapsTo = SnapsTo.Ticks; rangeSlider.TickFrequency = 4; rangeSlider.TickPlacement = TickPlacement.TopLeft; rangeSlider.ValuePlacement = ValuePlacement.BottomRight; rangeSlider.Orientation = Orientation.Vertical; stack.Children.Add(rangeSlider); this.Content = stack;
} }
}
|
XAML Code to set SnapsTo Value to StepValues:
<?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:local="clr-namespace:RangeSlider_" xmlns:range="clr-namespace:Syncfusion.SfRangeSlider.XForms;assembly=Syncfusion.SfRangeSlider.XForms" x:Class="RangeSlider_.RangeSlider_Page">
<ContentPage.Content> <range:SfRangeSlider x:Name="rangeSlider" BackgroundColor="Silver" RangeEnd="40" RangeStart="0" ShowRange="True" Minimum="0" Maximum="80" SnapsTo="StepValues" StepFrequency="10" ValuePlacement="BottomRight" />
</ContentPage.Content>
</ContentPage>
|
C# code to set SnapsTo Value to StepValues:
namespace RangeSlider { public partial class RangeSlider : ContentPage {
SfRangeSlider rangeSlider = new SfRangeSlider();
public RangeSlider() { InitializeComponent();
StackLayout stack = new StackLayout();
stack.BackgroundColor = Color.White; rangeSlider.HorizontalOptions = LayoutOptions.FillAndExpand; rangeSlider.VerticalOptions = LayoutOptions.FillAndExpand; rangeSlider.BackgroundColor = Color.Silver; rangeSlider.RangeEnd = 40; rangeSlider.RangeStart = 4; rangeSlider.ShowRange = true; rangeSlider.Minimum = 0; rangeSlider.Maximum = 80; rangeSlider.SnapsTo = SnapsTo.StepValues; rangeSlider.StepFrequency = 4; rangeSlider.TickPlacement = TickPlacement.TopLeft; rangeSlider.ValuePlacement = ValuePlacement.BottomRight; rangeSlider.Orientation = Orientation.Vertical; stack.Children.Add(rangeSlider); this.Content = stack;
} }
}
|
XAML Code to set SnapsTo value to None:
<?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_customlabel.RangeSlider"> <ContentPage.Content> <range:SfRangeSlider x:Name="rangeSlider" BackgroundColor="Silver" RangeEnd="40" RangeStart="0" ShowRange="True" Minimum="0" Maximum="80" SnapsTo="None" ValuePlacement="BottomRight" />
</ContentPage.Content> </ContentPage>
|
C# Code to set SnapsTo value to None:
namespace RangeSlider { public partial class RangeSlider : ContentPage {
SfRangeSlider rangeSlider = new SfRangeSlider();
public RangeSlider() { InitializeComponent();
StackLayout stack = new StackLayout(); stack.BackgroundColor = Color.White; rangeSlider.HorizontalOptions = LayoutOptions.FillAndExpand; rangeSlider.VerticalOptions = LayoutOptions.FillAndExpand; rangeSlider.BackgroundColor = Color.Silver; rangeSlider.RangeEnd = 40; rangeSlider.RangeStart = 4; rangeSlider.ShowRange = true; rangeSlider.Minimum = 0; rangeSlider.Maximum = 80; rangeSlider.SnapsTo = SnapsTo.None; rangeSlider.TickPlacement = TickPlacement.TopLeft; rangeSlider.ValuePlacement = ValuePlacement.BottomRight; rangeSlider.Orientation = Orientation.Vertical; stack.Children.Add(rangeSlider); this.Content = stack;
} } }
|
Image after setting SnapsTo value to Ticks:
|
Image after setting SnapsTo value to StepValues:
|
