We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

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:

 

 

 

 

Article ID: Published Date: Last Revised Date: Platform: Control:
7663 04/13/2017 04/13/2017 Xamarin.Forms SfRangeSlider
Did you find this information helpful?
Add Comment
You must log in to leave a comment

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.