LgSlider

LgSlider<T> is the Lagoon input component that lets you choose a single value on a bounded scale. Use it when the user needs to adjust a quantity, level, or ordered value without typing a number on the keyboard. To select two bounds, use LgSliderRange<T>.

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

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

Usage

Demonstration

Try this component in the Lagoon showcase.

Simple slider

Set Min, Max, and Step to build the scale. Two-way binding is done with @bind-Value.

VolumePage.razor

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

VolumePage.razor.cs

public partial class VolumePage : LgPage
{
    // Current value selected on the slider.
    private int _volume = 50;
}

Scale marks, labels, and step

ShowScale displays or hides the scale. ShowScaleLabels controls the labels below the marks, and ScaleLabelStep spaces those labels.

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
{
    // Low bound of the allowed score.
    private int _minScore = 0;

    // High bound of the allowed score.
    private int _maxScore = 20;

    // Increment used between two possible positions.
    private int _scoreStep = 1;

    // Spacing between scale label displays.
    private int _labelStep = 5;

    // Score chosen by the user.
    private int _score = 10;
}

Formatting and tooltips

DisplayFormat formats the numeric values displayed by the labels, read-only rendering, and tooltips. If DisplayFormat is absent, it is initialized from 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
{
    // Decimal threshold adjusted with single-decimal display.
    private decimal _threshold = 12.5m;
}

Discrete values and enumerations

Values limits the slider to an explicit list. When T is an enumeration, the displayed values use the translated name defined by display attributes.

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
{
    // Ordered list of levels available on the slider.
    private readonly List<RiskLevel> _riskLevels = new()
    {
        RiskLevel.Low,
        RiskLevel.Medium,
        RiskLevel.High,
    };

    // Risk level currently selected.
    private RiskLevel _riskLevel = RiskLevel.Medium;

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

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

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

Disabled and read-only

Disabled keeps the interactive rendering visible but blocks modification. ReadOnly replaces the slider with read-only content.

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
{
    // Value displayed by the slider.
    private int _volume = 40;

    // Temporarily locks the input without changing the rendering.
    private bool _isLocked;

    // Displays the value as non-editable.
    private bool _isReadOnly;
}

Intercepting a change

OnChangingAsync is called before applying the new value and can cancel it. OnChange is triggered after the modification is 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
{
    // Current value before business validation.
    private int _volume = 50;

    // Cancels changes that are too large to request gradual adjustment.
    private Task ValidateVolumeChangeAsync(ChangingEventArgs<int> args)
    {
        if (Math.Abs(args.NewValue - args.OldValue) > 30)
        {
            args.Cancel = true;
            ShowWarning("#VolumeChangeTooLarge");
        }
        return Task.CompletedTask;
    }

    // Notifies the user when the new value is applied.
    private Task NotifyVolumeChangedAsync(ChangeEventArgs args)
    {
        ShowSuccess("#VolumeChanged");
        return Task.CompletedTask;
    }
}

Properties

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

Events

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

Accessibility

LgSlider<T> renders a keyboard-focusable slider and exposes the current value via the slider's ARIA label. Always provide an explicit Label, AriaLabel, or AriaLabelledBy. Ensure the order of marks remains understandable, that Disabled is not used as the only visual indication, and that significant changes are still announced by an appropriate message or validation.

Related components

• LgSliderRange: range selection with two handles.