Blazorise Slider component

Sliders allow users to make selections from a range of values.

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

Examples

Basic

<Slider TValue="decimal" Value="25m" Max="100m" />

Min and Max values

With the Min and Max properties, you can set the minimum and maximum allowed value.

Current value: 60

<Paragraph>
    Current value: @value
</Paragraph>

<Field>
    <Slider @bind-Value="@value" Min="20" Max="80" />
</Field>
@code {
    int value = 60;
}

Steps

You can change the default step increment.

Current value: 40

<Paragraph>
    Current value: @value
</Paragraph>

<Field>
    <Slider @bind-Value="@value" Step="5" Max="100" />
</Field>
@code {
    int value = 40;
}

Attributes

Name Description Type Default
TValue Value data type. generic
Value The value that the tick represents. TValue default
ValueChanged Occurs after the value has changed. EventCallback<TValue>
Step Specifies the interval between valid values. TValue 1
Min Minimum value. TValue default
Max Maximum value. TValue default