Slider

<Slider DefaultValue="@([25d, 50d])" Max="100" Step="5" Class="mx-auto w-full max-w-xs" />

<Slider DefaultValue="@([10d, 20d, 70d])" Max="100" Step="10" Class="mx-auto w-full max-w-xs" />

<div class="mx-auto flex w-full max-w-xs items-center justify-center gap-3">
    <Slider DefaultValue="@([50d])" Max="100" Step="1" Orientation="vertical" Class="h-40" />
    <Slider DefaultValue="@([25d])" Max="100" Step="1" Orientation="vertical" Class="h-40" />
</div>

<div class="mx-auto grid w-full max-w-xs gap-3">
    <div class="flex items-center justify-between gap-2">
        <Label for="slider-demo-temperature">Temperature</Label>
        <span class="text-muted-foreground text-sm">@string.Join(", ", _values.Select(static value => value.ToString("0.0")))</span>
    </div>
    <Slider Id="slider-demo-temperature"
            Value="@_values"
            ValueChanged="OnValueChanged"
            Min="0"
            Max="1"
            Step="0.1" />
</div>

@code {
    private double[] _values = [0.3, 0.7];

    private Task OnValueChanged(double[] values)
    {
        _values = values;
        return Task.CompletedTask;
    }
}

<Slider DefaultValue="@([50d])" Max="100" Step="1" Disabled="true" Class="mx-auto w-full max-w-xs" />