Demos About Radzen
Search Results for

    Show / Hide Table of Contents

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

    Boost your Blazor development with Radzen

    Radzen is a desktop tool that gives you the power to create line of business applications. Build and launch Blazor apps visually, while we generate clean code for you.

    Learn More

    Download Radzen
    Download Radzen
    In This Article
    Back to top Radzen Blazor Components, © 2018-2022 Radzen. Source Code licensed under MIT