Blazor: Range type input's OnHold scenario (possible?)

user_13104186 0
Viewed 1954

Is it possible to get the actual 'onHold' data of a slider kind input in Blazor? Below you can see the code I created. As you may know, this way every time I press the button, I get back the current state of the slider, but I am willing to update the '@printnumber' as I am moving the slider, in real-time.

<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;
    }

}

I have been looking for a solution but didn't find any right scenario to solve this issue.

blazor .net c#
1 Answers

You can do it like the following:

@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;

}

Note: @bind is a compiler directive instructing the compiler to produce code that bound the slider's value attribute to the property actualNumber, and to create a change event handler to update the property actualNumber from the slider's value( See below a sample where I do this manually ). This is the default behavior, but you can instruct the compiler to use the input event instead of the change event so that the change is immediate.

You can do it like the following:

@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;

}

You can also do it like this:

@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);
    }

}

You can also do it like this:

@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;

}

Hope this helps...

user_61528910
Related