LgSlider

LgSlider<T> est le composant d’entrée Lagoon qui permet de choisir une valeur unique sur une échelle bornée. Utilisez-le lorsque l’utilisateur doit régler une quantité, un niveau ou une valeur ordonnée sans saisir un nombre au clavier. Pour sélectionner deux bornes, utilisez LgSliderRange<T>.

<LgSlider Min="0" Max="100" Step="5" @bind-Value="_volume" Label="#Volume" />

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

Utilisation

Démonstration

Essayez ce composant dans le showcase Lagoon.

Curseur simple

Définissez Min, Max et Step pour construire l’échelle. Le binding two-way se fait avec @bind-Value.

VolumePage.razor
<LgSlider Min="0"
          Max="100"
          Step="5"
          @bind-Value="_volume"
          Label="#Volume" />

VolumePage.razor.cs
public partial class VolumePage : LgPage
{
    // Valeur courante sélectionnée sur le curseur.
    private int _volume = 50;
}

Marques, libellés et pas

ShowScale affiche ou masque l’échelle. ShowScaleLabels contrôle les libellés sous les marques et ScaleLabelStep espace ces libellés.

ScorePage.razor
<LgSlider Min="_minScore"
          Max="_maxScore"
          Step="_scoreStep"
          ScaleLabelStep="_labelStep"
          ShowScale="true"
          ShowScaleLabels="true"
          @bind-Value="_score"
          Label="#Score" />

ScorePage.razor.cs
public partial class ScorePage : LgPage
{
    // Borne basse du score autorisé.
    private int _minScore = 0;

    // Borne haute du score autorisé.
    private int _maxScore = 20;

    // Incrément utilisé entre deux positions possibles.
    private int _scoreStep = 1;

    // Intervalle d’affichage des libellés de l’échelle.
    private int _labelStep = 5;

    // Score choisi par l’utilisateur.
    private int _score = 10;
}

Formatage et info-bulles

DisplayFormat formate les valeurs numériques affichées par les libellés, le rendu en lecture seule et les info-bulles. Si DisplayFormat est absent, il est initialisé à partir de Decimals.

ThresholdPage.razor
<LgSlider Min="0m"
          Max="100m"
          Step="0.5m"
          Decimals="1"
          DisplayFormat="N1"
          ShowTooltips="true"
          @bind-Value="_threshold"
          Label="#Threshold" />

ThresholdPage.razor.cs
public partial class ThresholdPage : LgPage
{
    // Seuil décimal réglé avec un affichage à une décimale.
    private decimal _threshold = 12.5m;
}

Valeurs discrètes et énumérations

Values limite le curseur à une liste explicite. Quand T est une énumération, les valeurs affichées utilisent le nom traduit défini par les attributs d’affichage.

RiskPage.razor
<LgSlider T="RiskLevel"
          Min="RiskLevel.Low"
          Max="RiskLevel.High"
          Values="_riskLevels"
          @bind-Value="_riskLevel"
          Label="#RiskLevel" />

RiskPage.razor.cs
using System.ComponentModel.DataAnnotations;

public partial class RiskPage : LgPage
{
    // Liste ordonnée des niveaux disponibles sur le curseur.
    private readonly List<RiskLevel> _riskLevels = new()
    {
        RiskLevel.Low,
        RiskLevel.Medium,
        RiskLevel.High,
    };

    // Niveau de risque actuellement sélectionné.
    private RiskLevel _riskLevel = RiskLevel.Medium;

    private enum RiskLevel
    {
        [Display(Name = "#RiskLow")]
        Low,

        [Display(Name = "#RiskMedium")]
        Medium,

        [Display(Name = "#RiskHigh")]
        High,
    }
}

Désactivation et lecture seule

Disabled garde le rendu interactif visible mais bloque la modification. ReadOnly remplace le curseur par le contenu de lecture seule.

LockedVolumePage.razor
<LgSlider Min="0"
          Max="100"
          Step="10"
          Disabled="_isLocked"
          ReadOnly="_isReadOnly"
          @bind-Value="_volume"
          Label="#Volume" />

LockedVolumePage.razor.cs
public partial class LockedVolumePage : LgPage
{
    // Valeur affichée par le curseur.
    private int _volume = 40;

    // Verrouille temporairement la saisie sans changer le rendu.
    private bool _isLocked;

    // Affiche la valeur sous forme non éditable.
    private bool _isReadOnly;
}

Intercepter un changement

OnChangingAsync est appelé avant l’application de la nouvelle valeur et peut l’annuler. OnChange est déclenché après la modification effective.

ConfirmedVolumePage.razor
<LgSlider Min="0"
          Max="100"
          Step="5"
          ConfirmationMessage="#ConfirmVolumeChange"
          OnChangingAsync="ValidateVolumeChangeAsync"
          OnChange="NotifyVolumeChangedAsync"
          @bind-Value="_volume"
          Label="#Volume" />

ConfirmedVolumePage.razor.cs
public partial class ConfirmedVolumePage : LgPage
{
    // Valeur en cours avant validation métier.
    private int _volume = 50;

    // Annule les changements trop importants pour demander un réglage progressif.
    private Task ValidateVolumeChangeAsync(ChangingEventArgs<int> args)
    {
        if (Math.Abs(args.NewValue - args.OldValue) > 30)
        {
            args.Cancel = true;
            ShowWarning("#VolumeChangeTooLarge");
        }
        return Task.CompletedTask;
    }

    // Informe l’utilisateur lorsque la nouvelle valeur est appliquée.
    private Task NotifyVolumeChangedAsync(ChangeEventArgs args)
    {
        ShowSuccess("#VolumeChanged");
        return Task.CompletedTask;
    }
}

Propriétés

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

Accessibilité

LgSlider<T> rend un curseur focusable au clavier et expose la valeur courante via le libellé ARIA du curseur. Fournissez toujours un Label, AriaLabel ou AriaLabelledBy explicite. Vérifiez que l’ordre des marques reste compréhensible, que Disabled n’est pas utilisé comme seule indication visuelle, et que les changements importants restent annoncés par un message ou une validation adaptée.

Composants liés

LgSliderRange : sélection d’une plage avec deux poignées.

Utilisation​

Démonstration​

Curseur simple​

Marques, libellés et pas​

Formatage et info-bulles​

Valeurs discrètes et énumérations​

Désactivation et lecture seule​

Intercepter un changement​

Propriétés​

Événements​

Accessibilité​

Composants liés​