HxInputRange #

Allows the user to select a number in a specified range using a slider.

Basic usage #

The Min and Max parameters are required.

50
<HxInputRange @bind-Value="value" Label="Example slider" Min="0" Max="100" />

@value

@code {
    private float value = 50;
}

Disabled #

Set the Enabled parameter to false in order to give the input a grayed out appearance and make it not interactable.

50

Steps #

By default, HxInputRange "snaps" to integer values. To change this, you can supply a value to the Step parameter.

50

Bind event #

Decide whether the Value is going to be updated onchange or oninput (immediately). The default is BindEvent.OnChange.

50

API #

Parameters #

Name Type Description
MaxREQUIRED TValue Maximum value.
MinREQUIRED TValue Minimum value.
AdditionalAttributes IReadOnlyDictionary<string, object> A collection of additional attributes that will be applied to the created element.
BindEvent BindEvent? Instructs whether the Value is going to be updated oninput (immediately), or onchange (usually onmouseup).
Default is BindEvent.OnChange.
ChipTemplate RenderFragment The chip template.
CssClass string The custom CSS class to render with the wrapping div.
DisplayName string Gets or sets the display name for this field.
This value is used when generating error messages when the input value fails to parse correctly.
Enabled bool? When null (default), the Enabled value is received from the cascading FormState. When the value is false, the input is rendered as disabled. To set multiple controls as disabled, use HxFormState.
GenerateChip bool When true, HxChipGenerator is used to generate chip item(s). The default is true.
Hint string The hint to render after the input as form-text.
HintTemplate RenderFragment The hint to render after the input as form-text.
InputCssClass string The custom CSS class to render with the input element.
Label string The label text.
LabelCssClass string The custom CSS class to render with the label.
LabelTemplate RenderFragment The label content.
Settings InputRangeSettings Set of settings to be applied to the component instance (overrides Defaults, overridden by individual parameters).
Step TValue By default, HxInputRange snaps to integer values. To change this, you can specify a step value.
ValidationMessageMode ValidationMessageMode? Specifies how the validation message should be displayed.
The default is ValidationMessageMode.Regular, you can override the application-wide default for all inputs in Defaults.
Value TValue Value of the input. This should be used with two-way binding.
ValueChanged EventCallback<TValue> A callback that updates the bound value.
ValueExpression Expression<Func<TValue>> An expression that identifies the bound value.

Methods #

Method Returns Description
FocusAsync() ValueTask Gives focus to the input element.

Static properties #

Property Type Description
Defaults InputRangeSettings Application-wide defaults for the HxInputRange.
An unhandled error has occurred. Reload 🗙