Slider component

This article demonstrates how to use the Slider component.

Get and set the value

As all Radzen Blazor input components the Slider has a Value property which gets and sets the value of the component. Use @bind-Value to get the user input.

<RadzenSlider @bind-Value=@value TValue="int" Min="0" Max="100" Change=@OnChange />

@code {
    int value = 67;

    void OnChange(dynamic value)
    {
        var str = value is IEnumerable ? string.Join(", ", value) : value;
        console.Log($"{name} value changed to {str}");
    }
}

Slider from -100 to 100

<RadzenSlider @bind-Value=@value TValue="int" Min="-100" Max="100" Change=@OnChange />

@code {
    int value = 67;

    void OnChange(dynamic value)
    {
        var str = value is IEnumerable ? string.Join(", ", value) : value;
        console.Log($"{name} value changed to {str}");
    }
}

Slider with Step 10

<RadzenSlider @bind-Value=@value TValue="int" Step="10"  />

@code {
    void OnChange(dynamic value)
    {
        var str = value is IEnumerable ? string.Join(", ", value) : value;
        console.Log($"{name} value changed to {str}");
    }
}

Range Slider

<RadzenSlider Range="true" @bind-Value=@values TValue="IEnumerable<int>"  />

@code {
    IEnumerable<int> values = new int[] { 14, 78 };

    void OnChange(dynamic value)
    {
        var str = value is IEnumerable ? string.Join(", ", value) : value;
        console.Log($"{name} value changed to {str}");
    }
}