Liquid Glass Effect in .NET MAUI DateTimeRangeSlider

17 Dec 20252 minutes to read

The Liquid Glass Effect introduces a modern, translucent design with adaptive color tinting and light refraction, creating a sleek, glass like user experience that remains clear and accessible. This section explains how to enable and customize the effect in the Syncfusion® .NET MAUI DateTime RangeSlider (SfDateTimeRangeSlider) control.

Apply liquid glass effect

Follow these steps to enable and configure the Liquid Glass Effect in the DateTime RangeSlider control:

Step 1: Enable the liquid glass effect on DateTime RangeSlider

Set the EnableLiquidGlassEffect property to true in the SfDateTimeRangeSlider control to apply the Liquid Glass Effect. When enabled,it provides responsive interaction for a smooth and engaging user experience.

The following code snippet demonstrates how to apply the Liquid Glass Effect to the SfDateTimeRangeSlider control:

<Grid>
    <Image Source="Wallpaper.png" Aspect="AspectFill">
        <sliders:SfDateTimeRangeSlider
            Minimum="2010-01-01" 
            Maximum="2018-01-01" 
            RangeStart="2012-01-01" 
            RangeEnd="2016-01-01"
            EnableLiquidGlassEffect="True" />
    </Grid>
using Syncfusion.Maui.Sliders;

var grid = new Grid
{
    BackgroundColor = Colors.Transparent
};

var image = new Image
{
    Source = "Wallpaper.png",
    Aspect = Aspect.AspectFill
};
grid.Children.Add(image);

SfDateTimeRangeSlider dateTimeRangeSlider = new SfDateTimeRangeSlider
{
    Minimun = new DateTime(2010, 01, 01),
    Maximum = new DateTime(2018, 01, 01),
    RangeStart = new DateTime(2012, 01, 01),
    RangeEnd = new DateTime(2016, 01, 01),
    EnableLiquidGlassEffect = true
};

grid.Children.Add(dateTimeRangeSlider);
this.Content = grid;

The following screenshot illustrates SfRangeSlider with the glass effect visible on the thumb while it is pressed.

date time range slider with liquid glass support

NOTE

This feature is supported only on .NET 10 along with iOS 26 and macOS 26