Custom Render Slider

3pa23pa2 USMember ✭✭
edited February 2017 in Xamarin.Forms

Hello colleagues..

Someone has any idea how to create a bar to the image that I show .. would be much appreciated ...

Any idea, guide, etc .. will be of good help ..

Thanks in advance

Best Answers

  • 3pa23pa2 US ✭✭
    Accepted Answer

    @rzee7 said:
    Hey @3pa2

    You should try this

    Cheers!!
    {rzee}

    I'm going to try what you say colleague

  • 3pa23pa2 US ✭✭
    Accepted Answer

    **Thank you very much I show here how I manage it .. I'm not exactly like it but it works for me ..

    First the xaml file**

                    <range:SfRangeSlider Orientation="Horizontal"
                                     HorizontalOptions="FillAndExpand"
                                     HeightRequest="100"
                                     Value="0"
                                     ValuePlacement="BottomRight"
                                     LabelPlacement="BottomRight"
                                     RangeStart="10"
                                     ShowRange="False"
                                     Minimum="0"
                                     Maximum="120"
                                     TickFrequency="20"
                                     StepFrequency="20"
                                     TickPlacement="Inline"
                                     KnobColor="#339966"
                                     TrackSelectionColor="#339966"
                                     LabelColor="#339966"
                                     TrackColor="White"
                                     SnapsTo="StepValues"
                                     ShowValueLabel="True"
                                     ShowCustomLabel="True"
                                     ToolTipPlacement="None"
                                     CustomLabels="{Binding LabesValue}">    
                    </range:SfRangeSlider>
    

    Remember to add the assembly to the wrapper of the xaml file and download the nuget package.

    xmlns:range="clr-namespace:Syncfusion.SfRangeSlider.XForms;assembly=Syncfusion.SfRangeSlider.XForms"

    **it is the view Model **

      public ObservableCollection<Items> LabesValue { get; set; }
    
    LabesValue = new ObservableCollection<Items>();
    
                LabesValue.Add(new Items()
                {
                    Label = "0",
                    Value = 0
    
                });
    
                LabesValue.Add(new Items()
                {
                    Label = "100",
                    Value = 20
    
                });
    
    
                LabesValue.Add(new Items()
                {
                    Label = "250",
                    Value = 40
    
                });
    
                LabesValue.Add(new Items()
                {
                    Label = "500",
                    Value = 60
    
                });
    
                LabesValue.Add(new Items()
                {
                    Label = "750",
                    Value = 80
    
                });
    
                LabesValue.Add(new Items()
                {
                    Label = "1000",
                    Value = 100
    
                });
    
                LabesValue.Add(new Items()
                {
                    Label = "all",
                    Value = 120
    
                });
    

    This is what is binding on the CustomLabels property

    In the page, remember to make the binding to the page with your view model

    BindingContext = marketPlaceInvestingViewModel = new MarketPlaceInvestingViewModel();

    Thank you very much. I hope this helps someone...

Answers

  • rzee7rzee7 INUniversity ✭✭✭✭✭

    Hey @3pa2

    You should try this

    Cheers!!
    {rzee}

  • 3pa23pa2 USMember ✭✭
    Accepted Answer

    @rzee7 said:
    Hey @3pa2

    You should try this

    Cheers!!
    {rzee}

    I'm going to try what you say colleague

  • 3pa23pa2 USMember ✭✭
    Accepted Answer

    **Thank you very much I show here how I manage it .. I'm not exactly like it but it works for me ..

    First the xaml file**

                    <range:SfRangeSlider Orientation="Horizontal"
                                     HorizontalOptions="FillAndExpand"
                                     HeightRequest="100"
                                     Value="0"
                                     ValuePlacement="BottomRight"
                                     LabelPlacement="BottomRight"
                                     RangeStart="10"
                                     ShowRange="False"
                                     Minimum="0"
                                     Maximum="120"
                                     TickFrequency="20"
                                     StepFrequency="20"
                                     TickPlacement="Inline"
                                     KnobColor="#339966"
                                     TrackSelectionColor="#339966"
                                     LabelColor="#339966"
                                     TrackColor="White"
                                     SnapsTo="StepValues"
                                     ShowValueLabel="True"
                                     ShowCustomLabel="True"
                                     ToolTipPlacement="None"
                                     CustomLabels="{Binding LabesValue}">    
                    </range:SfRangeSlider>
    

    Remember to add the assembly to the wrapper of the xaml file and download the nuget package.

    xmlns:range="clr-namespace:Syncfusion.SfRangeSlider.XForms;assembly=Syncfusion.SfRangeSlider.XForms"

    **it is the view Model **

      public ObservableCollection<Items> LabesValue { get; set; }
    
    LabesValue = new ObservableCollection<Items>();
    
                LabesValue.Add(new Items()
                {
                    Label = "0",
                    Value = 0
    
                });
    
                LabesValue.Add(new Items()
                {
                    Label = "100",
                    Value = 20
    
                });
    
    
                LabesValue.Add(new Items()
                {
                    Label = "250",
                    Value = 40
    
                });
    
                LabesValue.Add(new Items()
                {
                    Label = "500",
                    Value = 60
    
                });
    
                LabesValue.Add(new Items()
                {
                    Label = "750",
                    Value = 80
    
                });
    
                LabesValue.Add(new Items()
                {
                    Label = "1000",
                    Value = 100
    
                });
    
                LabesValue.Add(new Items()
                {
                    Label = "all",
                    Value = 120
    
                });
    

    This is what is binding on the CustomLabels property

    In the page, remember to make the binding to the page with your view model

    BindingContext = marketPlaceInvestingViewModel = new MarketPlaceInvestingViewModel();

    Thank you very much. I hope this helps someone...

  • poojakamath.0720poojakamath.0720 USMember ✭✭
    edited 3:56AM

    Here is the link " xamarinexperience.blogspot.com/2019/03/how-to-add-tick-marks-on-sliders-in.html " which has step by step tutorial on how to add ticks to slider in xamarin forms. It works on both android as well as ios without the need to integrate any third party library

Sign In or Register to comment.