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 |
| 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 |
Focuses the input range. |
Static properties #
| Property | Type | Description |
|---|---|---|
| Defaults | InputRangeSettings |
Application-wide defaults for the HxInputRange. |