How can I create a razor component with binding

Question

I created a customized input with label and some spans. (In the following, the spans are not shown, to keep the example simple.)

<div>
    <label for="length">length</label>
    <input type="number" id="length" @bind-value="@Length" min="100" max="500">
</div>
<span>@Length</span>

@code {
    private static double length = 300;
    private static int Length
    {
        get => (int)length;
        set => length = value;
    }
}

Since i need this customized input several times, I created a razor component LabeledInput.razor:

<div>
    <label for="@ID">@LabelText</label>
    <input type="number" id="@ID" @bind-value="@BindValue" min="@Min" max="@Max">
</div>

@code {
    [Parameter] public int BindValue { get; set; }
    [Parameter] public string ID { get; set; }
    [Parameter] public string LabelText { get; set; }
    [Parameter] public int Max { get; set; }
    [Parameter] public int Min { get; set; }
}

But when I use it as

[code from above]
<LabeledInput ID="length" LabelText="length2" Min="100" Max="500" BindValue="@Length"></LabeledInput>

clicking the spinner buttons of the LabeledInput does not update the <span>@Length</span> on the GUI. On the other hand, clicking the spinner buttons of the normal Input does update the span and also the LabeledInput. So, there is a binding but only in one direction.

What am I doing wrong?