ComponentsInputs and forms
Slider
A thumb on a track for choosing a value within a range. Use it when the position matters more than the exact number, such as volume or brightness, and pair it with a numeric field when exactness matters too.
A labeled slider
Child content becomes the label. Immediate updates the value while dragging; without it the value updates when the thumb is released. Variant.Filled colors the track up to the thumb.
Steps, tick marks and labels
Step snaps the thumb to multiples. TickMarks draws a mark per step, and TickMarkLabels names them in order.
Every color and size
The palette colors the slider styles, against its three sizes. Size changes the thumb and track thickness, not the length.
| Color ↓ · Size → | Small | Medium | Large |
|---|---|---|---|
| Primary | |||
| Secondary | |||
| Tertiary | |||
| Info | |||
| Success | |||
| Warning | |||
| Error | |||
| Dark |
Value labels
ValueLabel shows the value above the thumb while it moves. ValueLabelFormat and Culture format it; ValueLabelContent replaces it entirely.
With a numeric field, and a price range
Bind a slider and a numeric field to the same value so people can drag or type. MudBlazor 9.11 has no range slider, so two bounded sliders make a range.
s
Price: £40 to £120
Nullable and disabled
NullableValue binds a T? so “not set” is possible until the thumb moves. Disabled sliders keep their value visible.
Playground
Change any parameter; the markup below updates with only the values that differ from the defaults.
<MudSlider
@bind-Value="_volume"
Step="10"
TickMarks="true"
Immediate="true">Volume: @_volume</MudSlider>