Custom Render Slider

3pa2

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

3pa2

@rzee7 said:
Hey @3pa2

You should try this

Cheers!!
{rzee}

I'm going to try what you say colleague

3pa2

**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...

rzee7

Hey @3pa2

You should try this

Cheers!!
{rzee}

3pa2

@rzee7 said:
Hey @3pa2

You should try this

Cheers!!
{rzee}

I'm going to try what you say colleague

3pa2

**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.0720

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