<RadzenStack class="rz-p-0 rz-p-md-6 rz-p-lg-12" AlignItems="AlignItems.Center">
    <RadzenCard Variant="Variant.Outlined">
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Wrap="FlexWrap.Wrap">
            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                <RadzenLabel Text="Value" Component="valueSlider" />
                <RadzenSlider Name="valueSlider" Min="0" Max="200" @bind-Value=@value Style="width: 200px;" />
            </RadzenStack>
            <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
                <RadzenCheckBox @bind-Value=@showValue Name="showValueCheck" />
                <RadzenLabel Text="Show pointer value" Component="showValueCheck" />
            </RadzenStack>
        </RadzenStack>
    </RadzenCard>

    <RadzenLinearGauge Style="width: 180px; height: 300px;">
        <RadzenLinearGaugeScale Step="40" Min="0" Max="200" MinorStep="10"
                                Orientation="Orientation.Vertical">
            <RadzenLinearGaugeScalePointer Value=@value ShowValue=@showValue Fill="var(--rz-info)" />
            <RadzenLinearGaugeScaleRange From="0" To="80" Fill="var(--rz-success)" Height="8" />
            <RadzenLinearGaugeScaleRange From="80" To="140" Fill="var(--rz-warning)" Height="8" />
            <RadzenLinearGaugeScaleRange From="140" To="200" Fill="var(--rz-danger)" Height="8" />
        </RadzenLinearGaugeScale>
    </RadzenLinearGauge>
</RadzenStack>

@code {
    double value = 80;
    bool showValue = true;
}
