Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion MAUI/DateTime-Range-Slider/thumb-and-overlay.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Thumb and Thumb Overlay in .NET MAUI Range Slider control | Syncfusion®
title: Thumb and Thumb Overlay in .NET MAUI Range Slider | Syncfusion®
description: Learn here all about the Thumb and Thumb Overlay features of Syncfusion® .NET MAUI Range Slider (SfDateTimeRangeSlider) control and more.
platform: maui
control: SfDateTimeRangeSlider
Expand Down
19 changes: 11 additions & 8 deletions MAUI/DateTime-Slider/LiquidGlassSupport.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,31 +9,34 @@ documentation: ug

# Liquid Glass Effect in .NET MAUI DateTime Slider (SfDateTimeSlider)

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 Slider (SfDateTimeSlider) control.
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 Slider (SfDateTimeSlider) control.

## Apply liquid glass effect

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

### Step 1: Enable the liquid glass effect on DateTime Slider

Set the [EnableLiquidGlassEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_EnableLiquidGlassEffect) property to `true` in the [SfDateTimeSlider](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeSlider.html) control to apply the Liquid Glass Effect. When enabled,it provides responsive interaction for a smooth and engaging user experience.
Set the [EnableLiquidGlassEffect](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_EnableLiquidGlassEffect) property to `true` in the [SfDateTimeSlider](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeSlider.html) 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 `SfDateTimeSlider` control:

{% tabs %}
{% highlight xaml tabtitle="MainPage.xaml" hl_lines="6" %}
<Grid>
<Image Source="Wallpaper.png" Aspect="AspectFill">
<sliders:SfDateTimeSlider
Minimum="2010-01-01"
Maximum="2018-01-01"
EnableLiquidGlassEffect="True" />
<Image Source="Wallpaper.png" Aspect="AspectFill" />
<sliders:SfDateTimeSlider
Minimum="2010-01-01"
Maximum="2018-01-01"
EnableLiquidGlassEffect="True" />
</Grid>

{% endhighlight %}
{% highlight c# tabtitle="MainPage.xaml.cs" hl_lines="17" %}
using System;
using Microsoft.Maui.Controls;
using Syncfusion.Maui.Sliders;

var grid = new Grid
{
BackgroundColor = Colors.Transparent
Expand All @@ -48,7 +51,7 @@ grid.Children.Add(image);

SfDateTimeSlider dateTimeSlider = new SfDateTimeSlider
{
Minimun = new DateTime(2010, 01, 01),
Minimum = new DateTime(2010, 01, 01),
Maximum = new DateTime(2018, 01, 01),
EnableLiquidGlassEffect = true
};
Expand Down
27 changes: 20 additions & 7 deletions MAUI/DateTime-Slider/divider.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Dividers in .NET MAUI Slider control | Syncfusion®
description: Learn here all about adding and customizing the slider divider feature in .NET MAUI Slider (SfDateTimeSlider) control and more.
title: Dividers in .NET MAUI DateTime Slider control | Syncfusion®
description: Learn here all about the slider divider feature in .NET MAUI DateTime Slider (SfDateTimeSlider) control and more.
platform: maui
control: SfDateTimeSlider
documentation: ug
Expand Down Expand Up @@ -30,6 +30,8 @@ For example, if the [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.M
{% endhighlight %}

{% highlight C# %}
using Microsoft.Maui.Controls;
using Syncfusion.Maui.Sliders;

SfDateTimeSlider slider = new SfDateTimeSlider()
{
Expand Down Expand Up @@ -70,6 +72,8 @@ Change the active and inactive divider radius of the slider using the [`ActiveRa
{% endhighlight %}

{% highlight C# %}
using Microsoft.Maui.Controls;
using Syncfusion.Maui.Sliders;

SfDateTimeSlider slider = new SfDateTimeSlider()
{
Expand Down Expand Up @@ -103,17 +107,20 @@ Change the active and inactive divider color of the slider using the [`ActiveFil
ShowDividers="True">

<sliders:SfDateTimeSlider.DividerStyle>
<sliders:SliderDividerStyle ActiveRadius="7"
InactiveRadius="7"
ActiveFill="#EE3F3F"
InactiveFill="#F7B1AE"/>
</sliders:SfDateTimeSlider.DividerStyle>
<sliders:SliderDividerStyle ActiveRadius="7"
InactiveRadius="7"
ActiveFill="#EE3F3F"
InactiveFill="#F7B1AE" />
</sliders:SfDateTimeSlider.DividerStyle>

</sliders:SfDateTimeSlider>

{% endhighlight %}

{% highlight C# %}
using Microsoft.Maui.Controls;
using Microsoft.Maui.Graphics;
using Syncfusion.Maui.Sliders;

SfDateTimeSlider slider = new SfDateTimeSlider()
{
Expand Down Expand Up @@ -166,6 +173,9 @@ Also, change the active and inactive divider stroke color of the slider using th
{% endhighlight %}

{% highlight C# %}
using Microsoft.Maui.Controls;
using Microsoft.Maui.Graphics;
using Syncfusion.Maui.Sliders;

SfDateTimeSlider slider = new SfDateTimeSlider()
{
Expand Down Expand Up @@ -268,6 +278,9 @@ Change the state of the slider to disabled by setting `false` to the `IsEnabled`
{% endhighlight %}

{% highlight C# %}
using Microsoft.Maui.Controls;
using Microsoft.Maui.Graphics;
using Syncfusion.Maui.Sliders;

VerticalStackLayout stackLayout = new();
SfDateTimeSlider defaultSlider = new()
Expand Down
40 changes: 29 additions & 11 deletions MAUI/DateTime-Slider/events-and-commands.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Events and Commands in.NET MAUI Slider control | Syncfusion®
description: Learn here all about adding and customizing through events and commands of Syncfusion® .NET MAUI Slider (SfDateTimeSlider) control and more.
title: Events and Commands in .NET MAUI DateTime Slider control | Syncfusion®
description: Learn here all about customizing through the events and commands of the Syncfusion® .NET MAUI DateTime Slider (SfDateTimeSlider) control and more.
platform: maui
control: SfDateTimeSlider
documentation: ug
Expand All @@ -15,10 +15,10 @@ This section explains how to add the events and commands for DateTime Slider.

### Handle callbacks

* [ValueChangeStart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_ValueChangeStart) - Called when the user selecting a new value for the slider by tap/mouse down in the thumb.
* [ValueChangeStart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_ValueChangeStart) - Called when the user starts selecting a new value for the slider by tap/mouse down on the thumb.
* [ValueChanging](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeSlider.html#Syncfusion_Maui_Sliders_SfDateTimeSlider_ValueChanging) - Called when the user is selecting a new value for the slider by dragging the thumb.
* [ValueChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeSlider.html#Syncfusion_Maui_Sliders_SfDateTimeSlider_ValueChanged) - Called when the user completed selecting a new value.
* [ValueChangeEnd](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_ValueChangeEnd) - Called when the user stopped interacting with slider by tap/mouse up the thumb.
* [ValueChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeSlider.html#Syncfusion_Maui_Sliders_SfDateTimeSlider_ValueChanged) - Called when the user completes selecting a new value.
* [ValueChangeEnd](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_ValueChangeEnd) - Called when the user stops interacting with the slider by tap/mouse up on the thumb.

{% tabs %}

Expand All @@ -35,6 +35,8 @@ This section explains how to add the events and commands for DateTime Slider.
{% endhighlight %}

{% highlight C# %}
using System;
using Syncfusion.Maui.Sliders;

{
SfDateTimeSlider slider = new SfDateTimeSlider()
Expand Down Expand Up @@ -74,7 +76,7 @@ private void OnValueChangeEnd(object sender, EventArgs e)

Format or change the label text using the [`LabelCreated`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_LabelCreated) event. The [`SliderLabelCreatedEventArgs`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderLabelCreatedEventArgs.html) contains the following parameters:

* Text – Customize the text color using the [`Text`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderLabelCreatedEventArgs.html#Syncfusion_Maui_Sliders_SliderLabelCreatedEventArgs_Text) parameter.
* Text – Customize the text using the [`Text`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderLabelCreatedEventArgs.html#Syncfusion_Maui_Sliders_SliderLabelCreatedEventArgs_Text) parameter.
* Style – Formats the text color, font size, font family, offset using the [`Style`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderLabelCreatedEventArgs.html#Syncfusion_Maui_Sliders_SliderLabelCreatedEventArgs_Style) parameter.

{% tabs %}
Expand All @@ -95,6 +97,8 @@ Format or change the label text using the [`LabelCreated`](https://help.syncfusi
{% endhighlight %}

{% highlight C# %}
using System;
using Syncfusion.Maui.Sliders;

{
SfDateTimeSlider slider = new SfDateTimeSlider()
Expand Down Expand Up @@ -170,14 +174,16 @@ Format or change the whole tooltip label text using the [`TooltipLabelCreated`](
{% endhighlight %}

{% highlight C# %}
using System;
using Syncfusion.Maui.Sliders;

{
SfDateTimeSlider slider = new SfDateTimeSlider()
{
Minimum = new DateTime(2010, 01, 01),
Maximum = new DateTime(2018, 01, 01),
Value = new DateTime(2014, 01, 01),
Interval = 3,
Interval = 2,
ShowTicks = true,
ShowLabels = true,
Tooltip = new SliderTooltip(),
Expand Down Expand Up @@ -220,11 +226,14 @@ The [`DragStartedCommand`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.S
{% endhighlight %}

{% highlight C# %}
using System;
using System.Windows.Input;
using Syncfusion.Maui.Sliders;

SfDateTimeSlider slider = new SfDateTimeSlider()
{
Minimum = new DateTime(2010, 01, 01),
Maximum = new DateTime(2020, 01, 01),
Maximum = new DateTime(2018, 01, 01),
Value = new DateTime(2014, 01, 01),
DragStartedCommand = viewModel.DragStartedCommand,
};
Expand Down Expand Up @@ -270,11 +279,14 @@ The [`DragStartedCommandParameter`](https://help.syncfusion.com/cr/maui/Syncfusi
{% endhighlight %}

{% highlight C# %}
using System;
using System.Windows.Input;
using Syncfusion.Maui.Sliders;

SfDateTimeSlider slider = new SfDateTimeSlider()
{
Minimum = new DateTime(2010, 01, 01),
Maximum = new DateTime(2020, 01, 01),
Maximum = new DateTime(2018, 01, 01),
Value = new DateTime(2014, 01, 01),
DragStartedCommand = viewModel.DragStartedCommand,
DragStartedCommandParameter = "1"
Expand Down Expand Up @@ -320,11 +332,14 @@ The [`DragCompletedCommand`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui
{% endhighlight %}

{% highlight C# %}
using System;
using System.Windows.Input;
using Syncfusion.Maui.Sliders;

SfDateTimeSlider slider = new SfDateTimeSlider()
{
Minimum = new DateTime(2010, 01, 01),
Maximum = new DateTime(2020, 01, 01),
Maximum = new DateTime(2018, 01, 01),
Value = new DateTime(2014, 01, 01),
DragCompletedCommand = viewModel.DragCompletedCommand
};
Expand Down Expand Up @@ -370,11 +385,14 @@ The [`DragCompletedCommandParameter`](https://help.syncfusion.com/cr/maui/Syncfu
{% endhighlight %}

{% highlight C# %}
using System;
using System.Windows.Input;
using Syncfusion.Maui.Sliders;

SfDateTimeSlider slider = new SfDateTimeSlider()
{
Minimum = new DateTime(2010, 01, 01),
Maximum = new DateTime(2020, 01, 01),
Maximum = new DateTime(2018, 01, 01),
Value = new DateTime(2014, 01, 01),
DragCompletedCommand = viewModel.DragCompletedCommand,
DragCompletedCommandParameter = "1"
Expand Down
8 changes: 5 additions & 3 deletions MAUI/DateTime-Slider/getting-started.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: Getting started with .NET MAUI DateTime Slider control | Syncfusion®
description: This section explains about the getting started with Syncfusion® MAUI Slider (SfDateTimeSlider) control and more.
description: This section explains how to get started with the Syncfusion® .NET MAUI DateTime Slider (SfDateTimeSlider) control and more.
platform: maui
control: SfDateTimeSlider
documentation: ug
Expand Down Expand Up @@ -77,13 +77,13 @@ Before proceeding, ensure the following are set up:

## Step 1: Create a new .NET MAUI project

1. Go to **File > New Solution,** Select .NET (C#) and choose the .NET MAUI App template.
1. Go to **File > New Solution**, select **.NET (C#)**, and choose the **.NET MAUI App** template.
2. Enter the Project Name, Solution Name, and Location.
3. Select the .NET framework version and click Create.

## Step 2: Install the Syncfusion<sup>®</sup> MAUI Sliders NuGet package

1. In **Solution Explorer,** right-click the project and choose **Manage NuGet Packages.**
1. In **Solution Explorer**, right-click the project and choose **Manage NuGet Packages**.
2. Search for [Syncfusion.Maui.Sliders](https://www.nuget.org/packages/Syncfusion.Maui.Sliders/) and install the latest version.
3. Ensure the necessary dependencies are installed correctly, and the project is restored. If not, Open the Terminal in Rider and manually run: `dotnet restore`

Expand Down Expand Up @@ -144,6 +144,8 @@ Initialize the [SfDateTimeSlider](https://help.syncfusion.com/cr/maui/Syncfusion
{% endhighlight %}

{% highlight C# %}
using System;
using Syncfusion.Maui.Sliders;

SfDateTimeSlider slider = new SfDateTimeSlider()
{
Expand Down
16 changes: 10 additions & 6 deletions MAUI/DateTime-Slider/interval.md
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
---
layout: post
title: Interval in.NET MAUI Slider control | Syncfusion®
description: Learn here all about adding the Interval feature of Syncfusion® .NET MAUI Slider (SfDateTimeSlider) control and more.
title: Interval in .NET MAUI DateTime Slider control | Syncfusion®
description: Learn here all about the Interval feature of the .NET MAUI DateTime Slider (SfDateTimeSlider) control and more.
platform: maui
control: SfDateTimeSlider
documentation: ug
---

# Interval in .NET MAUI DateTime Slider (SfDateTimeSlider)

This section explains how to add the interval for DateTime Slider.
This section explains how to add the interval for the DateTime Slider.

## Date interval

Slider elements like labels, ticks, and dividers are rendered based on the [`Interval`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Interval), [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfSlider.html#Syncfusion_Maui_Sliders_SfSlider_Minimum), and [`Maximum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfSlider.html#Syncfusion_Maui_Sliders_SfSlider_Maximum) properties. The default value is `0`.

Change the interval type using the [`IntervalType`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.IDateTimeElement.html#Syncfusion_Maui_Sliders_IDateTimeElement_IntervalType) property. Format or change the label text using the [`DateFormat`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.IDateTimeElement.html#Syncfusion_Maui_Sliders_IDateTimeElement_DateFormat) property.

For example, if the [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Minimum) is `DateTime(2000, 01, 01)`, the [`Maximum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Maximum) is `DateTime(2005, 01, 01)`, and [`Interval`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Interval) is `1`, [`IntervalType`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeSlider.html#Syncfusion_Maui_Sliders_SfDateTimeSlider_IntervalType) is [`SliderDateIntervalType.Years`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderDateIntervalType.html#Syncfusion_Maui_Sliders_SliderDateIntervalType_Years), [`DateFormat`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeSlider.html#Syncfusion_Maui_Sliders_SfDateTimeSlider_DateFormat) is `yyyy` then the Slider will render the labels, major ticks, and dividers at 2000, 2001, 2002, and so on.
For example, if the [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Minimum) is `DateTime(2000, 01, 01)`, the [`Maximum`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Maximum) is `DateTime(2005, 01, 01)`, the [`Interval`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.RangeView-1.html#Syncfusion_Maui_Sliders_RangeView_1_Interval) is `1`, the [`IntervalType`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeSlider.html#Syncfusion_Maui_Sliders_SfDateTimeSlider_IntervalType) is [`SliderDateIntervalType.Years`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SliderDateIntervalType.html#Syncfusion_Maui_Sliders_SliderDateIntervalType_Years), and the [`DateFormat`](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Sliders.SfDateTimeSlider.html#Syncfusion_Maui_Sliders_SfDateTimeSlider_DateFormat) is `yyyy`, then the DateTime Slider will render the labels, major ticks, and dividers at 2000, 2001, 2002, and so on.

{% tabs %}

Expand All @@ -36,10 +36,12 @@ For example, if the [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.M
{% endhighlight %}

{% highlight C# %}
using System;
using Syncfusion.Maui.Sliders;

SfDateTimeSlider slider = new SfDateTimeSlider()
{
Minimum = new DateTime(2010, 01, 01),
Minimum = new DateTime(2000, 01, 01),
Maximum = new DateTime(2004, 01, 01),
Value = new DateTime(2002, 01, 01),
Interval = 1,
Expand Down Expand Up @@ -76,10 +78,12 @@ For example, if the [`Minimum`](https://help.syncfusion.com/cr/maui/Syncfusion.M
{% endhighlight %}

{% highlight C# %}
using System;
using Syncfusion.Maui.Sliders;

SfDateTimeSlider slider = new SfDateTimeSlider()
{
Minimum = new DateTime(2010, 01, 01),
Minimum = new DateTime(2000, 01, 01),
Maximum = new DateTime(2004, 01, 01),
Value = new DateTime(2002, 01, 01),
ShowLabels = true,
Expand Down
Loading