Slider

Overview

A slider provides a visual indication of adjustable content, as well as the current setting in the total range of content. Use a slider when you want people to set defined values (such as volume or brightness), or when people would benefit from instant feedback on the effect of setting changes.

Usage

Horizontal Sliders
<Stack Horizontal="false"
       Style="width:100%;max-width:300px;"
       Tokens=@(new StackTokens() { ChildrenGap = new[] { 20.0 } })>
    <Slider />
    <Slider Label="Snapping slider example"
            DefaultValue="20"
            Min="0"
            Max="50"
            Step="10"
            ShowValue="true"
            SnapToStep="true" />
    <Slider Label="Disabled example"
            DefaultValue="300"
            Min="50"
            Max="500"
            Step="50"
            ShowValue="true"
            Disabled="true" />
    <Slider Label="Controlled example"
            @bind-Value=controlledValue
            Min="0"
            Max="10"
            ShowValue="true" />
    <Slider Label="Example with formatted value"
            Min="0"
            Max="100"
            AriaValueText=@(val => $"{val.ToString()} percent")
            ValueFormat=@(val => $"{val.ToString()}%")
            ShowValue="true" />
    <Slider Label="Origin from zero"
            Min="-5"
            Max="5"
            Step="1"
            DefaultValue="2"
            ShowValue="true"
            OriginFromZero="true" />
</Stack>
            
            
Vertical Sliders
<Stack Horizontal="true"
       Style="width:100%;height:200px;"
       Tokens=@(new StackTokens() { ChildrenGap = new[] { 20.0 } })>
    <Slider Label="Basic"
            Min="1"
            Max="5"
            Step="1"
            DefaultValue="2"
            ShowValue="true"
            Vertical="true" />
    <Slider Label="Disabled"
            DefaultValue="300"
            Min="50"
            Max="500"
            Step="50"
            ShowValue="true"
            Disabled="true"
            Vertical="true" />
    <Slider Label="Controlled example"
            @bind-Value=controlledValue
            Min="0"
            Max="10"
            ShowValue="true"
            Vertical="true" />
    <Slider Label="Example with formatted value"
            Min="0"
            Max="100"
            AriaValueText=@(val => $"{val.ToString()} percent")
            ValueFormat=@(val => $"{val.ToString()}%")
            ShowValue="true"
            Vertical="true" />
    <Slider Label="Origin from zero"
            Min="-5"
            Max="15"
            Step="1"
            DefaultValue="5"
            ShowValue="true"
            OriginFromZero="true"
            Vertical="true" />
</Stack>