How to add CustomLabels to maui sfrangeslider

[Markus]

Hallo,

can someone tell me how to add the CustomLabels from Xamarin SfRangeSlider Control to the Maui sfrangeslider controll?

<range:SfRangeSlider

ShowCustomLabel="True"/>

 <range:SfRangeSlider.CustomLabels>

                                            <local:ObservableCollectionList>

                                                <range:Items Label="Hobby" Value="60" />

                                                <range:Items Label="Amateur" Value="80" />

                                                <range:Items Label="License" Value="100" />

                                                <range:Items Label="Pro" Value="120" />

                                            </local:ObservableCollectionList>

</range:SfRangeSlider.CustomLabels>

Thanks,

Markus Nottbohm

 </range:SfRangeSlider>

[Sowndharya Selladurai]

Hi Markus,

We are validating your query and will be discussing it with our team. We will update our response shortly. Thank you for your patience.

Regards,

Sowndharya Selladurai.

[Sowndharya Selladurai]

Hi Markus,

We want to let you know that MAUI does not currently offer support for CustomLabels. We can add the observable collection in label using the LabelCreated event. Refer the below code snippet:

<sliders:SfRangeSlider Minimum="1"

                                        Maximum="4"

                                        RangeStart="2"

                                        RangeEnd="3"

                                        LabelCreated="SfRangeSlider_LabelCreated">

</sliders:SfRangeSlider>

public partial class MainPage : ContentPage

{

    public Dictionary<string,string> labelMap { get; set; }

 

    public MainPage()

   {

        InitializeComponent();

 

        labelMap = new Dictionary<string, string>

        {

            { "1", "Hobby" },

            { "2", "Amateur" },

            { "3", "License" },

            { "4", "Pro" }

        };

    }

 

    private void SfRangeSlider_LabelCreated(object sender, Syncfusion.Maui.Sliders.SliderLabelCreatedEventArgs e)

    {

        if (labelMap.ContainsKey(e.Text))

        {

            e.Text = labelMap[e.Text];

        }

    }

}

Reference: https://help.syncfusion.com/maui/range-slider/events-and-commands#customize-label-text

In below attached the sample for reference. I hope this helps! Let me know if you need further assistance.

Regards,
Sowndharya.

Attachment: SliderSample_5c90ab2b.zip

[Markus]

Hallo Sowndharya,

thank you. I have one more question for the rangeslider, where is the value option like in xamarin or what should I use?

Value="{Binding SliderFTPCalc_USP}"

and how to set the slider only to use one thumb?

Thanks,

Markus

[Sowndharya Selladurai]

Hi Markus,

In Maui, we have added separate controls such as SfRangeSlider and SfSlider . You can use the SfSlider if you want to use a single thumb and set the Value property. Either if you want to select a range, you can use the SfRangeSlider.

Reference:

• https://help.syncfusion.com/maui/slider/migration

• https://help.syncfusion.com/maui/range-slider/migration

In the previous update, we created labels based on the interval property. For example, if the minimum value was 1, the maximum value was 4, and the interval was set to 2, only two labels would be created. The LabelCreated event would have only two indices, and we could set only two labels accordingly.

Regards,

Sowndharya.