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" />

Note: Since Slider is a generic component you will have to specify the exact data type for the value. Most of the time it will be recognized automatically when you set the Value attribute, but if not you will just use the TValue attribute and define the type manually.

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

API

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`