+@using Nextended.Core.Contracts +@using Nextended.Core.Types +@inherits ExampleBase + +<MudText Typo="Typo.caption" Class="mt-2 mb-2"> + @L["Selected: {0} – {1}", _value.Start, _value.End] +</MudText> + +<MudStack Row="true" Spacing="2" Class="mb-3" AlignItems="AlignItems.Center"> + <MudText>@L["Mode:"]</MudText> + <MudExEnumSelect T="DateRangeSliderMode" @bind-Value="_mode" Style="min-width: 140px;" /> + <MudSwitch T="bool" @bind-Value="_zoom" Color="Color.Primary" Label="@L["Mouse wheel zoom"]" /> +</MudStack> + +<MudExDateRangeSlider @ref="_slider" + Mode="_mode" + EnableMouseWheelZoom="_zoom" + SizeRange="@_sizeRange" + @bind-Value="_value" + AllowWholeRangeDrag="true" /> + +@code { + protected override void OnAfterRender(bool firstRender) + { + if (firstRender) ComponentRef = _slider; + } + + private MudExDateRangeSlider? _slider; + private DateRangeSliderMode _mode = DateRangeSliderMode.Month; + private bool _zoom = true; + + private static readonly DateOnly Today = DateOnly.FromDateTime(DateTime.Today); + + private IRange<DateOnly> _sizeRange = new RangeOf<DateOnly>(Today.AddYears(-2), Today.AddYears(2), null); + private IRange<DateOnly> _value = new RangeOf<DateOnly>(Today.AddMonths(-3), Today.AddMonths(3), null); +} + +
+@using Nextended.Core.Contracts +@using Nextended.Core.Types +@inherits ExampleBase + +<MudText Typo="Typo.caption" Class="mt-2 mb-2"> + @L["Selected window: {0} – {1}", _value.Start, _value.End] +</MudText> + +<MudStack Row="true" Spacing="2" Class="mb-3" AlignItems="AlignItems.Center"> + <MudText>@L["Mode:"]</MudText> + <MudExEnumSelect T="DateTimeRangeSliderMode" @bind-Value="_mode" Style="min-width: 140px;" /> + <MudSwitch T="bool" @bind-Value="_zoom" Color="Color.Primary" Label="@L["Mouse wheel zoom"]" /> +</MudStack> + +<MudExDateTimeRangeSlider @ref="_slider" + Mode="_mode" + EnableMouseWheelZoom="_zoom" + SizeRange="@_sizeRange" + @bind-Value="_value" + AllowWholeRangeDrag="true" /> + +@code { + protected override void OnAfterRender(bool firstRender) + { + if (firstRender) ComponentRef = _slider; + } + + private MudExDateTimeRangeSlider? _slider; + private DateTimeRangeSliderMode _mode = DateTimeRangeSliderMode.Hour; + private bool _zoom = true; + + private static readonly DateTime Today = DateTime.Today; + + private IRange<DateTime> _sizeRange = new RangeOf<DateTime>(Today.AddDays(-7), Today.AddDays(7), null); + private IRange<DateTime> _value = new RangeOf<DateTime>(Today.AddHours(-12), Today.AddHours(12), null); +} + +
+@using Nextended.Core.Contracts +@using Nextended.Core.Types +@inherits ExampleBase + +<MudText Typo="Typo.caption" Class="mt-2 mb-2"> + @L["Selected slot: {0} – {1}", _value.Start.ToString("HH\\:mm"), _value.End.ToString("HH\\:mm")] +</MudText> + +<MudStack Row="true" Spacing="2" Class="mb-3" AlignItems="AlignItems.Center"> + <MudText>@L["Mode:"]</MudText> + <MudExEnumSelect T="TimeRangeSliderMode" @bind-Value="_mode" Style="min-width: 160px;" /> + <MudSwitch T="bool" @bind-Value="_zoom" Color="Color.Primary" Label="@L["Mouse wheel zoom"]" /> +</MudStack> + +<MudExTimeRangeSlider @ref="_slider" + Mode="_mode" + EnableMouseWheelZoom="_zoom" + SizeRange="@_sizeRange" + @bind-Value="_value" + AllowWholeRangeDrag="true" /> + +@code { + protected override void OnAfterRender(bool firstRender) + { + if (firstRender) ComponentRef = _slider; + } + + private MudExTimeRangeSlider? _slider; + private TimeRangeSliderMode _mode = TimeRangeSliderMode.QuarterHour; + private bool _zoom = true; + + // Visible window: full day (zoom-in via mouse wheel works without an explicit AbsoluteSizeRange). + private IRange<TimeOnly> _sizeRange = new RangeOf<TimeOnly>(new TimeOnly(0, 0), new TimeOnly(23, 59), null); + private IRange<TimeOnly> _value = new RangeOf<TimeOnly>(new TimeOnly(9, 30), new TimeOnly(11, 0), null); +} + +
for MudBlazor 9.4.0
+for MudBlazor