)
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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to move the knob step by step instead of continuously

Platform: Xamarin.Forms |
Control: SfRangeSlider |
Published Date: April 13, 2017 |
Last Revised Date: April 13, 2017

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:

 

 

 

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon