A shadcn/ui inspired Blazor component library

Installation

Add the Slider component using the CLI:

shadcnblazor component add slider

Usage

The Slider component lets users select a value within a range. Use Min, Max, and Step to define the range. Bind Value for two-way binding.

Value: 50

1

2

3

4

5

6

7

8

<div class="space-y-2">
    <Slider @bind-Value="_value" Min="0" Max="100" AriaLabel="Volume" />
    <p class="text-sm text-muted-foreground">Value: @_value</p>
</div>

@code {
    private double _value = 50;
}

Examples

Range

Customize Min, Max, and Step for different value ranges.

0–10 (step 0.5)

5

1

2

3

4

5

6

7

8

9

10

11

<div class="space-y-4">
    <div>
        <p class="text-sm font-medium mb-1">0–10 (step 0.5)</p>
        <Slider @bind-Value="_rating" Min="0" Max="10" Step="0.5" AriaLabel="Rating" />
        <p class="text-xs text-muted-foreground">@_rating</p>
    </div>
</div>

@code {
    private double _rating = 5;
}

API Reference

Slider

Single-thumb slider for selecting a value within a min/max range.

Properties

Name	Type	Description
`AdditionalAttributes`	`Dictionary<string, Object>`
`AriaLabel`	`string`
`Class`	`string`
`Disabled`	`bool`
`Max`	`double`
`Min`	`double`
`OnChange`	`EventCallback<double>`	Callback invoked when the user finishes changing the value (on change event).
`Size`	`Size`
`Step`	`double`
`Value`	`double`	The current value.
`ValueChanged`	`EventCallback<double>`	Callback invoked when the value changes.

Events

Name	Type	Description
`OnChange`	`EventCallback<double>`	Callback invoked when the user finishes changing the value (on change event).
`ValueChanged`	`EventCallback<double>`	Callback invoked when the value changes.

Methods

Method	Returns	Description
`Equals`	`bool`
`GetHashCode`	`int`
`GetType`	`Type`
`SetParametersAsync`	`Task`
`ToString`	`string`

Mobile support for API reference coming soon.