LgSliderRange

LgSliderRange<T> is the Lagoon input component that allows selecting a range between two bounds on the same scale. It differs from LgSlider<T> by its two handles: the bound value is a RangeValue<T> containing Start and End.

<LgSliderRange Min="0" Max="100" Step="5" @bind-Value="_priceRange" Label="#PriceRange" />

Namespace: Lagoon.UI.Components
Inherits from: LgSliderBase<RangeValue<T>, T> → LgInputBase<RangeValue<T>> → LgAriaComponentBase → LgComponentBase
Interfaces: ILgComponentPolicies, IInputBusy, ILgFocusableComponent
NuGet package: Lagoon.UI

Usage

Demonstration

Try this component in the Lagoon showcase.

Simple range

Bind @bind-Value to a RangeValue<T>. Start represents the left handle and End the right handle.

PriceRangePage.razor
@using Lagoon.Shared.Model

<LgSliderRange Min="0"
               Max="100"
               Step="5"
               @bind-Value="_priceRange"
               Label="#PriceRange" />

PriceRangePage.razor.cs
using Lagoon.Shared.Model;

public partial class PriceRangePage : LgPage
{
    // Range selected by the two handles of the component.
    private RangeValue<int> _priceRange = new(20, 80);
}

Bounds, step, and scale labels

Like LgSlider<T>, the component generates positions with Min, Max and Step. ScaleLabelStep spaces the labels displayed under the scale.

DurationRangePage.razor
@using Lagoon.Shared.Model

<LgSliderRange Min="_minDuration"
               Max="_maxDuration"
               Step="_durationStep"
               ScaleLabelStep="_labelStep"
               ShowScale="true"
               ShowScaleLabels="true"
               @bind-Value="_durationRange"
               Label="#DurationRange" />

DurationRangePage.razor.cs
using Lagoon.Shared.Model;

public partial class DurationRangePage : LgPage
{
    // Minimum duration available on the scale.
    private int _minDuration = 0;

    // Maximum duration available on the scale.
    private int _maxDuration = 60;

    // Increment between two selectable durations.
    private int _durationStep = 5;

    // Interval between two visible labels.
    private int _labelStep = 15;

    // Range of durations currently selected.
    private RangeValue<int> _durationRange = new(15, 45);
}

Discrete values

Values enforces a list of allowed positions. Both bounds of the range must belong to this list.

AgeRangePage.razor
@using Lagoon.Shared.Model

<LgSliderRange Min="18"
               Max="65"
               Values="_allowedAges"
               @bind-Value="_ageRange"
               Label="#AgeRange" />

AgeRangePage.razor.cs
using Lagoon.Shared.Model;

public partial class AgeRangePage : LgPage
{
    // Allowed positions to avoid ages not offered by the business.
    private readonly List<int> _allowedAges = new()
    {
        18,
        21,
        25,
        30,
        40,
        50,
        65,
    };

    // Initial age range compatible with the values list.
    private RangeValue<int> _ageRange = new(21, 50);
}

Formatting and tooltips

ShowTooltips displays each value at its handle. For decimal types, explicitly set Decimals or DisplayFormat to control the display of each bound.

RateRangePage.razor
@using Lagoon.Shared.Model

<LgSliderRange Min="0m"
               Max="10m"
               Step="0.25m"
               Decimals="2"
               DisplayFormat="N2"
               ShowTooltips="true"
               @bind-Value="_rateRange"
               Label="#RateRange" />

RateRangePage.razor.cs
using Lagoon.Shared.Model;

public partial class RateRangePage : LgPage
{
    // Decimal range displayed with two decimal places.
    private RangeValue<decimal> _rateRange = new(1.25m, 7.5m);
}

Disabling and read-only mode

Disabled prevents moving the handles. ReadOnly displays the range as text, according to the ToString() of RangeValue<T> or the custom ReadonlyContent fragment.

LockedRangePage.razor
@using Lagoon.Shared.Model

<LgSliderRange Min="0"
               Max="100"
               Step="10"
               Disabled="_isLocked"
               ReadOnly="_isReadOnly"
               @bind-Value="_range"
               Label="#Range" />

LockedRangePage.razor.cs
using Lagoon.Shared.Model;

public partial class LockedRangePage : LgPage
{
    // Range displayed by the component.
    private RangeValue<int> _range = new(20, 70);

    // Blocks interactions without changing the main rendering.
    private bool _isLocked;

    // Switches to read-only rendering.
    private bool _isReadOnly;
}

Intercepting a range change

OnChangingAsync receives the old and new range before applying. Set Cancel to reject the change.

LimitedRangePage.razor
@using Lagoon.Shared.Model

<LgSliderRange Min="0"
               Max="100"
               Step="5"
               OnChangingAsync="ValidateRangeChangeAsync"
               OnChange="NotifyRangeChangedAsync"
               @bind-Value="_range"
               Label="#Range" />

LimitedRangePage.razor.cs
using Lagoon.Shared.Model;

public partial class LimitedRangePage : LgPage
{
    // Range being modified.
    private RangeValue<int> _range = new(25, 55);

    // Refuses a range that is too wide to respect the business selection rule.
    private Task ValidateRangeChangeAsync(ChangingEventArgs<RangeValue<int>> args)
    {
        if (args.NewValue.End - args.NewValue.Start > 50)
        {
            args.Cancel = true;
            ShowWarning("#RangeTooWide");
        }
        return Task.CompletedTask;
    }

    // Confirms the actual application of the new range.
    private Task NotifyRangeChangedAsync(ChangeEventArgs args)
    {
        ShowSuccess("#RangeChanged");
        return Task.CompletedTask;
    }
}

Properties

Name	Type	Default	Declared in	Description
`AdditionalAttributes`	`IReadOnlyDictionary<string, object>`	`null`	`LgInputBase<RangeValue<T>>`	Additional HTML attributes captured and applied to the component container.
`AriaLabel`	`string`	`null`	`LgAriaComponentBase`	Translated ARIA label used when no visible label adequately describes the slider.
`AriaLabelledBy`	`string`	`null`	`LgAriaComponentBase`	Identifier of the element that labels the slider.
`AutoFocus`	`bool`	`false`	`LgInputBase<RangeValue<T>>`	Places focus on the slider on first render.
`ConfirmationMessage`	`string`	`null`	`LgInputBase<RangeValue<T>>`	Translated message requested before applying a new range.
`CssClass`	`string`	`null`	`LgInputBase<RangeValue<T>>`	Additional CSS classes added to the input group.
`CursorContent`	`RenderFragment`	internal rendering	`LgSliderBase<RangeValue<T>, T>`	Advanced fragment allowing you to replace the rendering of the two handles.
`Decimals`	`int?`	`null` → `0` for `LgSliderRange<T>`	`LgSliderBase<RangeValue<T>, T>`	Number of decimal places used to initialize the default numeric format.
`Disabled`	`bool`	`false`	`LgInputBase<RangeValue<T>>`	Disables input without switching to read-only mode.
`DisplayFormat`	`string`	`"N{Decimals}"`	`LgSliderBase<RangeValue<T>, T>`	Format applied to each displayed numeric bound.
`DisplayName`	`string`	`null`	`LgInputBase<RangeValue<T>>`	Field name used in some validation messages.
`HideValidationMessage`	`bool`	`false`	`LgInputBase<RangeValue<T>>`	Hides inline validation messages for this field.
`IsRange`	`bool`	`false` → `true` on initialization	`LgSliderBase<RangeValue<T>, T>`	Technical indicator of range mode, enabled by `LgSliderRange<T>`.
`Label`	`string`	`null`	`LgInputBase<RangeValue<T>>`	Translated text of the label associated with the slider.
`LabelContent`	`RenderFragment`	`null`	`LgInputBase<RangeValue<T>>`	Fragment allowing you to customize the label content.
`Max`	`T`	`default(T)`	`LgSliderBase<RangeValue<T>, T>`	Maximum value of the scale.
`Min`	`T`	`default(T)`	`LgSliderBase<RangeValue<T>, T>`	Minimum value of the scale.
`OnChange`	`EventCallback<ChangeEventArgs>`	unassigned	`LgInputBase<RangeValue<T>>`	Callback triggered after applying a new range.
`OnChangingAsync`	`Func<ChangingEventArgs<RangeValue<T>>, Task>`	`null`	`LgSliderBase<RangeValue<T>, T>`	Callback called before the range is applied; it can cancel the change.
`OnReset`	`EventCallback<ChangeEventArgs>`	unassigned	`LgInputBase<RangeValue<T>>`	Callback triggered after using the reset button.
`PolicyEdit`	`string`	`null`	`LgInputBase<RangeValue<T>>`	Policy required to allow editing of the slider.
`PolicyVisible`	`string`	`null`	`LgInputBase<RangeValue<T>>`	Policy required to display the slider.
`ReadOnly`	`bool`	`false`	`LgInputBase<RangeValue<T>>`	Displays the range in non-editable mode.
`ReadonlyContent`	`RenderFragment`	internal rendering	`LgSliderBase<RangeValue<T>, T>`	Advanced fragment allowing you to replace the read-only rendering.
`Required`	`bool?`	`null`	`LgInputBase<RangeValue<T>>`	Forces or infers the required state from the model's `[Required]` attribute.
`ResetButton`	`bool?`	application configuration	`LgInputBase<RangeValue<T>>`	Enables display of the reset button if the value can be reset to zero.
`ResetText`	`string`	application configuration	`LgInputBase<RangeValue<T>>`	Translated text of the reset button.
`ResetTextAriaLabel`	`string`	application configuration	`LgInputBase<RangeValue<T>>`	Translated ARIA label of the reset button.
`ScaleLabelStep`	`T`	`default(T)`	`LgSliderBase<RangeValue<T>, T>`	Spacing between two visible labels on the scale.
`ShowScale`	`bool`	`true`	`LgSliderBase<RangeValue<T>, T>`	Displays the scale marks.
`ShowScaleLabels`	`bool`	`true`	`LgSliderBase<RangeValue<T>, T>`	Displays labels under the scale marks.
`ShowTooltips`	`bool`	`false`	`LgSliderBase<RangeValue<T>, T>`	Displays values in tooltips attached to the handles.
`Step`	`T`	`default(T)` → `1` if less than or equal to zero	`LgSliderBase<RangeValue<T>, T>`	Increment between two automatically generated positions.
`Tooltip`	`string`	`null`	`LgInputBase<RangeValue<T>>`	Translated help bubble associated with the component.
`TooltipIsHtml`	`bool`	`false`	`LgInputBase<RangeValue<T>>`	Indicates if the help bubble contains HTML.
`Value`	`RangeValue<T>`	`new RangeValue<T>()`	`LgInputBase<RangeValue<T>>`	Selected range, usually bound with `@bind-Value`.
`ValueChanged`	`EventCallback<RangeValue<T>>`	unassigned	`LgInputBase<RangeValue<T>>`	Callback generated by the two-way binding to propagate the range.
`ValueExpression`	`Expression<Func<RangeValue<T>>>`	`null`	`LgInputBase<RangeValue<T>>`	Expression of the bound field, used by Blazor validation.
`Values`	`ICollection<T>`	`null`	`LgSliderBase<RangeValue<T>, T>`	Explicit list of possible values; if absent, the list is generated with `Min`, `Max`, and `Step`.

Events

Name	Type	Description
`ValueChanged`	`EventCallback<RangeValue<T>>`	Notifies the new range in the two-way binding.
`OnChange`	`EventCallback<ChangeEventArgs>`	Fires after the range is effectively applied.
`OnChangingAsync`	`Func<ChangingEventArgs<RangeValue<T>>, Task>`	Fires before the range is applied and can cancel it.
`OnReset`	`EventCallback<ChangeEventArgs>`	Fires after the range is reset.

Accessibility

LgSliderRange<T> renders two keyboard-focusable handles. Each handle has an ARIA label indicating its role as the start or end of the range and its current value. Provide a Label, AriaLabel, or AriaLabelledBy to describe the complete range, keep scale labels sufficiently spaced, and ensure the start value remains clearly understandable relative to the end value.

LgSlider: selection of a single value with a single handle.

Usage​

Demonstration​

Simple range​

Bounds, step, and scale labels​

Discrete values​

Formatting and tooltips​

Disabling and read-only mode​

Intercepting a range change​

Properties​

Events​

Accessibility​

Related components​