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.

Need users to choose both a minimum and maximum value? Use RangeSlider.

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.

Value bounds

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

Best Practices

Approximate Input

A slider works best when choosing an approximate value from a bounded range is more useful than typing an exact number. Choose a step that represents meaningful values in the domain instead of exposing arbitrary precision.

Value Alternatives

Provide a visible label and communicate the current value, minimum, maximum, and unit. Pair the slider with a numeric input when users may need precise entry or a more accessible way to set the value.

Volume

Use the slider for quick adjustments or enter an exact percentage.

<Field Group>
    <FieldLabel>Volume</FieldLabel>
    <FieldBody>
        <Div Display="Display.Flex" Flex="Flex.AlignItems.Center" Gap="Gap.Is3">
            <Div Flex="Flex.Grow.Is1">
                <Slider TValue="int" @bind-Value="@volume" Min="0" Max="100" Step="5" />
            </Div>
            <Div Width="Width.Is25">
                <NumericInput TValue="int" @bind-Value="@volume" Min="0" Max="100" Step="5" />
            </Div>
            <Text>%</Text>
        </Div>
        <FieldHelp>Use the slider for quick adjustments or enter an exact percentage.</FieldHelp>
    </FieldBody>
</Field>

@code {
    private int volume = 65;
}

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

<Slider />