How to disable .NET MAUI Slider?

2 mins read

By using the Visual State Manager, you can customize the slider properties based on enabled (default) and disabled states. This section explains how to make a disabled slider using the Syncfusion .NET MAUI Sliders.

Step 1: Create a .NET MAUI application project in Visual Studio.

Step 2: Add the Syncfusion.Maui.Sliders NuGet package to the project from nuget.org by opening the NuGet package manager in Visual Studio, then search for Syncfusion.Maui.Sliders and install it.

Step 3: In the MauiProgram.cs file, register the Syncfusion.Maui.Core handler as shown in the following code sample.

Using C#

using Syncfusion.Maui.Core.Hosting;
 
namespace SliderDemo
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureSyncfusionCore();
 
            return builder.Build();
        }
    }
}

Note:

The Syncfusion.Maui.Core package is dependent on Syncfusion.Maui.Sliders NuGet package, and it will be installed automatically when you install the Syncfusion.Maui.Sliders package in step 2.

Step 4: Add the .NET MAUI Sliders control’s namespace to the MainPage.xaml.

XAML

xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"

Step 5: Create a style and define the Visual State Manager for the SfSlider, then add different values to the properties such as TrackStyle, ThumbStyle, DividerStyle, TickStyle, LabelStyle, etc., for the enabled (default) and disabled states as shown in the following code sample.

XAML

<ContentPage.Resources>
        <Style TargetType="sliders:SfSlider">
            <Setter Property="VisualStateManager.VisualStateGroups">
                <VisualStateGroupList>
                    <VisualStateGroup>
                        <VisualState x:Name="Default">
                            <VisualState.Setters>
                                <Setter Property="TrackStyle">
                                    <Setter.Value>
                                        <sliders:SliderTrackStyle ActiveSize="10" InactiveSize="8"/>
                                    </Setter.Value>
                                </Setter>
                            </VisualState.Setters>
                        </VisualState>
 
                        <VisualState x:Name="Disabled">
                            <VisualState.Setters>
                                <Setter Property="TrackStyle">
                                    <Setter.Value>
                                        <sliders:SliderTrackStyle ActiveFill="Grey" InactiveFill="LightGrey" />
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="ThumbStyle">
                                    <Setter.Value>
                                        <sliders:SliderThumbStyle Fill="Grey" />
                                    </Setter.Value>
                                </Setter>
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
               </VisualStateGroupList>
           </Setter>
      </Style>
 </ContentPage.Resources>

Step 6: Now, initialize the SfSlider in the XAML file and set the IsEnabled property value as False.

XAML

<ContentPage.Content>
    <sliders:SfSlider IsEnabled="False" />
</ContentPage.Content>

Output

Syncfusion Maui disabled slider

Check the following links for more features in Syncfusion MAUI Sliders:

Did you find this information helpful?

Yes

Comments (0)

How to disable .NET MAUI Slider?

Access denied