@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Default" Code="@_codeSliderDefault">
    <Slider @bind-Value="_slider1Value" Class="w-full max-w-sm" />
</PatternCard>

<PatternCard Label="Custom Steps" Code="@_codeSliderSteps">
    <Stack Gap="4" Class="w-full max-w-sm">
        <Slider @bind-Value="_slider2Value" Min="0" Max="10" Step="1" Class="w-full" />
        <Slider @bind-Value="_slider3Value" Min="0" Max="100" Step="5" Class="w-full" />
    </Stack>
</PatternCard>
<PatternCard Label="With Labels" Code="@_codeSliderLabels">
    <Stack Gap="2" Class="w-full max-w-sm">
        <Flex Justify="between" Class="text-xs text-muted-foreground">
            <Lumeo.Text As="span">Volume</Lumeo.Text>
            <Lumeo.Text As="span">@((int)_slider4Value)%</Lumeo.Text>
        </Flex>
        <Slider @bind-Value="_slider4Value" Class="w-full" />
        <Flex Justify="between" Class="text-xs text-muted-foreground">
            <Lumeo.Text As="span">0%</Lumeo.Text>
            <Lumeo.Text As="span">100%</Lumeo.Text>
        </Flex>
    </Stack>
</PatternCard>
</Stack>

@code {
    private double _slider1Value = 50;

    private double _slider2Value = 25;

    private double _slider3Value = 75;

    private double _slider4Value = 40;

        private string _codeSliderDefault = @"<Slider @bind-Value=""_value"" />";
        private string _codeSliderSteps = @"<Slider @bind-Value=""_value"" Min=""0"" Max=""10"" Step=""1"" />
    <Slider @bind-Value=""_value2"" Min=""0"" Max=""100"" Step=""5"" />";

        private string _codeSliderLabels = @"<Stack Gap=""2"">
        <Flex Justify=""between"" Class=""text-xs text-muted-foreground"">
            <Lumeo.Text As=""span"">Volume</Lumeo.Text>
            <Lumeo.Text As=""span"">@((int)_value)%</Lumeo.Text>
        </Flex>
        <Slider @bind-Value=""_value"" />
        <Flex Justify=""between"" Class=""text-xs text-muted-foreground"">
            <Lumeo.Text As=""span"">0%</Lumeo.Text>
            <Lumeo.Text As=""span"">100%</Lumeo.Text>
        </Flex>
    </Stack>";
}
