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 March 22

    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.