LgSliderRange

LgSliderRange<T> est le composant d’entrée Lagoon qui permet de choisir une plage entre deux bornes sur une même échelle. Il se distingue de LgSlider<T> par ses deux poignées : la valeur liée est un RangeValue<T> contenant Start et End.

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

Espace de noms : Lagoon.UI.Components
Hérite de : LgSliderBase<RangeValue<T>, T> → LgInputBase<RangeValue<T>> → LgAriaComponentBase → LgComponentBase
Interfaces : ILgComponentPolicies, IInputBusy, ILgFocusableComponent
Package NuGet : Lagoon.UI

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Plage simple

Liez @bind-Value à un RangeValue<T>. Start représente la poignée gauche et End la poignée droite.

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
{
    // Plage sélectionnée par les deux poignées du composant.
    private RangeValue<int> _priceRange = new(20, 80);
}

Bornes, pas et libellés d’échelle

Comme LgSlider<T>, le composant génère les positions avec Min, Max et Step. ScaleLabelStep espace les libellés affichés sous l’échelle.

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
{
    // Durée minimale disponible sur l’échelle.
    private int _minDuration = 0;

    // Durée maximale disponible sur l’échelle.
    private int _maxDuration = 60;

    // Incrément entre deux durées sélectionnables.
    private int _durationStep = 5;

    // Intervalle entre deux libellés visibles.
    private int _labelStep = 15;

    // Plage de durées actuellement sélectionnée.
    private RangeValue<int> _durationRange = new(15, 45);
}

Valeurs discrètes

Values force une liste de positions autorisées. Les deux bornes de la plage doivent appartenir à cette liste.

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
{
    // Positions autorisées pour éviter les âges non proposés par le métier.
    private readonly List<int> _allowedAges = new()
    {
        18,
        21,
        25,
        30,
        40,
        50,
        65,
    };

    // Plage d’âges initiale compatible avec la liste de valeurs.
    private RangeValue<int> _ageRange = new(21, 50);
}

Formatage et info-bulles

ShowTooltips affiche chaque valeur au niveau de sa poignée. Pour les types décimaux, définissez explicitement Decimals ou DisplayFormat afin de maîtriser l’affichage de chaque borne.

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
{
    // Plage décimale affichée avec deux décimales.
    private RangeValue<decimal> _rateRange = new(1.25m, 7.5m);
}

Désactivation et lecture seule

Disabled empêche de déplacer les poignées. ReadOnly affiche la plage sous forme textuelle, selon le ToString() de RangeValue<T> ou le fragment ReadonlyContent personnalisé.

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
{
    // Plage affichée par le composant.
    private RangeValue<int> _range = new(20, 70);

    // Bloque les interactions sans changer le rendu principal.
    private bool _isLocked;

    // Bascule vers le rendu de lecture seule.
    private bool _isReadOnly;
}

Intercepter un changement de plage

OnChangingAsync reçoit l’ancienne et la nouvelle plage avant application. Positionnez Cancel pour refuser la modification.

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
{
    // Plage en cours de modification.
    private RangeValue<int> _range = new(25, 55);

    // Refuse une plage trop large pour respecter la règle métier de sélection.
    private Task ValidateRangeChangeAsync(ChangingEventArgs<RangeValue<int>> args)
    {
        if (args.NewValue.End - args.NewValue.Start > 50)
        {
            args.Cancel = true;
            ShowWarning("#RangeTooWide");
        }
        return Task.CompletedTask;
    }

    // Confirme l’application effective de la nouvelle plage.
    private Task NotifyRangeChangedAsync(ChangeEventArgs args)
    {
        ShowSuccess("#RangeChanged");
        return Task.CompletedTask;
    }
}

Propriétés

Nom	Type	Défaut	Déclaré dans	Description
`AdditionalAttributes`	`IReadOnlyDictionary<string, object>`	`null`	`LgInputBase<RangeValue<T>>`	Attributs HTML additionnels capturés et appliqués au conteneur du composant.
`AriaLabel`	`string`	`null`	`LgAriaComponentBase`	Libellé ARIA traduit utilisé quand aucun libellé visible ne décrit suffisamment le curseur.
`AriaLabelledBy`	`string`	`null`	`LgAriaComponentBase`	Identifiant de l’élément qui labellise le curseur.
`AutoFocus`	`bool`	`false`	`LgInputBase<RangeValue<T>>`	Place le focus sur le curseur au premier rendu.
`ConfirmationMessage`	`string`	`null`	`LgInputBase<RangeValue<T>>`	Message traduit demandé avant d’appliquer une nouvelle plage.
`CssClass`	`string`	`null`	`LgInputBase<RangeValue<T>>`	Classes CSS additionnelles ajoutées au groupe de saisie.
`CursorContent`	`RenderFragment`	rendu interne	`LgSliderBase<RangeValue<T>, T>`	Fragment avancé permettant de remplacer le rendu des deux poignées.
`Decimals`	`int?`	`null` → `0` pour `LgSliderRange<T>`	`LgSliderBase<RangeValue<T>, T>`	Nombre de décimales utilisé pour initialiser le format numérique par défaut.
`Disabled`	`bool`	`false`	`LgInputBase<RangeValue<T>>`	Désactive la saisie sans passer en lecture seule.
`DisplayFormat`	`string`	`"N{Decimals}"`	`LgSliderBase<RangeValue<T>, T>`	Format appliqué à chaque borne numérique affichée.
`DisplayName`	`string`	`null`	`LgInputBase<RangeValue<T>>`	Nom du champ utilisé dans certains messages de validation.
`HideValidationMessage`	`bool`	`false`	`LgInputBase<RangeValue<T>>`	Masque les messages de validation inline pour ce champ.
`IsRange`	`bool`	`false` → `true` à l’initialisation	`LgSliderBase<RangeValue<T>, T>`	Indicateur technique du mode plage, activé par `LgSliderRange<T>`.
`Label`	`string`	`null`	`LgInputBase<RangeValue<T>>`	Texte traduit du libellé associé au curseur.
`LabelContent`	`RenderFragment`	`null`	`LgInputBase<RangeValue<T>>`	Fragment permettant de personnaliser le contenu du libellé.
`Max`	`T`	`default(T)`	`LgSliderBase<RangeValue<T>, T>`	Valeur maximale de l’échelle.
`Min`	`T`	`default(T)`	`LgSliderBase<RangeValue<T>, T>`	Valeur minimale de l’échelle.
`OnChange`	`EventCallback<ChangeEventArgs>`	non assigné	`LgInputBase<RangeValue<T>>`	Callback déclenché après l’application d’une nouvelle plage.
`OnChangingAsync`	`Func<ChangingEventArgs<RangeValue<T>>, Task>`	`null`	`LgSliderBase<RangeValue<T>, T>`	Callback appelé avant l’application de la plage ; il peut annuler le changement.
`OnReset`	`EventCallback<ChangeEventArgs>`	non assigné	`LgInputBase<RangeValue<T>>`	Callback déclenché après l’utilisation du bouton de réinitialisation.
`PolicyEdit`	`string`	`null`	`LgInputBase<RangeValue<T>>`	Policy requise pour autoriser l’édition du curseur.
`PolicyVisible`	`string`	`null`	`LgInputBase<RangeValue<T>>`	Policy requise pour afficher le curseur.
`ReadOnly`	`bool`	`false`	`LgInputBase<RangeValue<T>>`	Affiche la plage en mode non éditable.
`ReadonlyContent`	`RenderFragment`	rendu interne	`LgSliderBase<RangeValue<T>, T>`	Fragment avancé permettant de remplacer le rendu en lecture seule.
`Required`	`bool?`	`null`	`LgInputBase<RangeValue<T>>`	Force l’état obligatoire ou le déduit de l’attribut `[Required]` du modèle.
`ResetButton`	`bool?`	configuration applicative	`LgInputBase<RangeValue<T>>`	Active l’affichage du bouton de réinitialisation si la valeur peut être remise à zéro.
`ResetText`	`string`	configuration applicative	`LgInputBase<RangeValue<T>>`	Texte traduit du bouton de réinitialisation.
`ResetTextAriaLabel`	`string`	configuration applicative	`LgInputBase<RangeValue<T>>`	Libellé ARIA traduit du bouton de réinitialisation.
`ScaleLabelStep`	`T`	`default(T)`	`LgSliderBase<RangeValue<T>, T>`	Espacement entre deux libellés visibles sur l’échelle.
`ShowScale`	`bool`	`true`	`LgSliderBase<RangeValue<T>, T>`	Affiche les marques de l’échelle.
`ShowScaleLabels`	`bool`	`true`	`LgSliderBase<RangeValue<T>, T>`	Affiche les libellés sous les marques de l’échelle.
`ShowTooltips`	`bool`	`false`	`LgSliderBase<RangeValue<T>, T>`	Affiche les valeurs dans des info-bulles attachées aux poignées.
`Step`	`T`	`default(T)` → `1` si inférieur ou égal à zéro	`LgSliderBase<RangeValue<T>, T>`	Incrément entre deux positions générées automatiquement.
`Tooltip`	`string`	`null`	`LgInputBase<RangeValue<T>>`	Bulle d’aide traduite associée au composant.
`TooltipIsHtml`	`bool`	`false`	`LgInputBase<RangeValue<T>>`	Indique si la bulle d’aide contient du HTML.
`Value`	`RangeValue<T>`	`new RangeValue<T>()`	`LgInputBase<RangeValue<T>>`	Plage sélectionnée, généralement liée avec `@bind-Value`.
`ValueChanged`	`EventCallback<RangeValue<T>>`	non assigné	`LgInputBase<RangeValue<T>>`	Callback généré par le binding two-way pour propager la plage.
`ValueExpression`	`Expression<Func<RangeValue<T>>>`	`null`	`LgInputBase<RangeValue<T>>`	Expression du champ lié, utilisée par la validation Blazor.
`Values`	`ICollection<T>`	`null`	`LgSliderBase<RangeValue<T>, T>`	Liste explicite des valeurs possibles ; si absente, la liste est générée avec `Min`, `Max` et `Step`.

Événements

Nom	Type	Description
`ValueChanged`	`EventCallback<RangeValue<T>>`	Notifie la nouvelle plage dans le binding two-way.
`OnChange`	`EventCallback<ChangeEventArgs>`	Se déclenche après l’application effective de la plage.
`OnChangingAsync`	`Func<ChangingEventArgs<RangeValue<T>>, Task>`	Se déclenche avant l’application de la plage et peut l’annuler.
`OnReset`	`EventCallback<ChangeEventArgs>`	Se déclenche après la réinitialisation de la plage.

Accessibilité

LgSliderRange<T> rend deux poignées focusables au clavier. Chaque poignée possède un libellé ARIA indiquant son rôle de début ou de fin de plage et sa valeur courante. Fournissez un Label, AriaLabel ou AriaLabelledBy pour décrire la plage complète, gardez des libellés d’échelle suffisamment espacés et vérifiez que la valeur de début reste toujours compréhensible par rapport à la valeur de fin.

Composants liés

LgSlider : sélection d’une valeur unique avec une seule poignée.

Utilisation​

Démonstration​

Plage simple​

Bornes, pas et libellés d’échelle​

Valeurs discrètes​

Formatage et info-bulles​

Désactivation et lecture seule​

Intercepter un changement de plage​

Propriétés​

Événements​

Accessibilité​

Composants liés​