Blazor コントロール
最大値と最小値の範囲指定
コントロール > Inputコントロール > NumericBox > 最大値と最小値の範囲指定

You can set up the range of the maximum and minimum value that can be entered in a NumericBox control using Max and Min properties of the C1NumericBox class.

NumericBox control with specified range

The following code example demonstrates setting maximum and minimum values in NumericBox. In this example, we set the maximum value as "10" using the Max property and minimum value as "0" using the Min property. 

Razor
コードのコピー
<label>Step - Max & Min</label>
<div>
    <C1NumericBox Format="##,###.##" Placeholder="Any Text" Style="@_c1Style" TNumeric="double?" Step="2" Max="10" Min="0"></C1NumericBox>
</div>

Razor
コードのコピー
@code{

    double? _value;

    readonly C1Style _c1Style = new C1Style() { Width = 130 };

    readonly C1Style _customStyle1 = new C1Style() { Width = 230, Height = 45, BorderColor = "orange", BorderWidth = 1, };
    readonly C1Style _customStyle2 = new C1Style() { Width = 230, Height = 55, BorderColor = "green", BorderWidth = 3, };
    readonly C1Style _customStyle3 = new C1Style() { Width = 270, Height = 65, BorderColor = "violet", BorderWidth = 5, };


    private void HandleValueChanged(object sender, C1NumericBoxEventArgs e)
    {

        _value = (double?)e.Value;

        StateHasChanged();
    }

}