Slider Component

No labels

<Slider ValueLow="0"  ValueHigh="25" />
<Slider ValueLow="0"  ValueHigh="50" />
<Slider ValueLow="25" ValueHigh="75" />

Labels below

0% 50%

25% 75%

50% 100%

<Slider ValueLow="0"  ValueHigh="50"  LabelType="below" />
<Slider ValueLow="25" ValueHigh="75"  LabelType="below" />
<Slider ValueLow="50" ValueHigh="100" LabelType="below" />

Tooltip labels

<Slider ValueLow="0"  ValueHigh="25" LabelType="tooltip" />
<Slider ValueLow="25" ValueHigh="75" LabelType="tooltip" />

Size sm

0% 50%

<Slider Size="sm" ValueLow="0"  ValueHigh="50"  LabelType="below" />
<Slider Size="sm" ValueLow="25" ValueHigh="75"  LabelType="tooltip" />

Disabled

25% 75%

<Slider ValueLow="25" ValueHigh="75" Disabled="true" LabelType="below" />

Interactive (two-way bind)

Range: 25% – 75%

10% 60%

Range: 10% – 60%

<Slider @bind-ValueLow="low1"
        @bind-ValueHigh="high1"
        LabelType="tooltip" />

<p>Range: @low1% – @high1%</p>

@code {
    private double low1 = 25;
    private double high1 = 75;
}