Blazor: сценарий OnHold для входных данных диапазона (возможно?)

Question

Можно ли получить фактические данные onHold для ввода типа слайдера в Blazor? Ниже вы можете увидеть код, который я создал. Как вы, возможно, знаете, таким образом, каждый раз, когда я нажимаю кнопку, я возвращаю текущее состояние ползунка, но я хочу обновлять «@printnumber» при перемещении ползунка в режиме реального времени.

<p>Number:</p>
<input type="range" min="3" max="50" step="1" @bind="actualNumber" />
<p>@printNumber</p>
<button class="btn btn-primary" @onclick="Calc" >Click me</button>

@code
{
    private int actualNumber;
    private int printNumber;

    public void Calc()
    {
        printNumber = actualNumber;
    }

}

Я искал решение, но не нашел подходящего сценария для решения этой проблемы.

Answer 1

Вы можете сделать это следующим образом:

@page "/"

<p>Number:</p>
<input type="range" min="3" max="50" step="1" @bind="@actualNumber" 
@bind:event="oninput"/>


<p>@actualNumber</p>

@code
{
   private int actualNumber { get; set; } = 10;

}

Примечание: @bind - это директива компилятора, указывающая компилятору создать код, который связывает атрибут значения ползунка со свойством actualNumber, и создать изменение обработчик события для обновления свойства actualNumber из значения ползунка (см. пример ниже, где я делаю это вручную). Это поведение по умолчанию, но вы можете указать компилятору использовать входное событие вместо события изменения, чтобы изменение было немедленным.

Вы можете сделать это следующим образом:

@page "/"

<p>Number:</p>
<input type="range" min="3" max="50" step="1" @bind- 
          value="@actualNumber" @bind-value:event="oninput"/>


<p>@actualNumber</p>

@code
{
   private int actualNumber { get; set; } = 10;

}

Вы также можете сделать это так:

@page "/"

<p>Number:</p>
<input type="range" min="3" max="50" step="1" value="@actualNumber" @oninput="@((args) => Calc(args.Value.ToString()))"/>



<p>@actualNumber</p>


@code
{
    private int actualNumber { get; set; } = 10;


    public void Calc(string step)
    {
        actualNumber = Convert.ToInt32(step);
    }

}

Вы также можете сделать это так:

@page "/"

<p>Number:</p>

<input type="range" min="3" max="50" step="1" value="@actualNumber" 
@oninput="@((args) => actualNumber = Convert.ToInt32( args.Value))" />


<p>@actualNumber</p>

@code
{
   private int actualNumber { get; set; } = 10;

}

Надеюсь, это поможет ...