@page "/components/slider"

<PageTitle>Slider — Lumeo</PageTitle>

<PageHeader Title="Slider" Description="An input where the user selects a value from within a given range." />

<div class="mt-10 space-y-3">
    <Heading Id="when-to-use" Level="2" Class="scroll-mt-20">When to Use</Heading>
    <ul class="list-disc list-inside space-y-1 text-muted-foreground text-sm">
        <li>Select a value from a continuous or stepped numeric range</li>
        <li>Control volume, brightness, or opacity with a drag interaction</li>
        <li>Filter products by price range using a dual-thumb range slider</li>
        <li>Set thresholds, limits, or budgets visually</li>
        <li>Provide an intuitive alternative to numeric text inputs for bounded values</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Stack Gap="2" Class="w-full max-w-sm">
            <Slider @bind-Value="_value1" />
            <Lumeo.Text Size="sm" Color="muted">Value: @_value1</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Custom Range" Code="@_rangeCode">
        <Stack Gap="2" Class="w-full max-w-sm">
            <Slider @bind-Value="_value2" Min="0" Max="1000" Step="50" />
            <Lumeo.Text Size="sm" Color="muted">Value: @_value2 / 1000</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Step Values" Code="@_stepCode">
        <Stack Gap="2" Class="w-full max-w-sm">
            <Slider @bind-Value="_value3" Min="0" Max="10" Step="1" />
            <Lumeo.Text Size="sm" Color="muted">Value: @_value3</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Disabled" Code="@_disabledCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <Slider Value="40" Disabled="true" />
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Volume Control Example" Code="@_volumeCode">
        <Stack Gap="2" Class="w-full max-w-sm">
            <Flex Gap="3" Align="center">
                <DynamicIcon Name="Volume1" Class="h-4 w-4 text-muted-foreground" />
                <Slider @bind-Value="_volume" Min="0" Max="100" Step="1" Class="flex-1" />
                <DynamicIcon Name="Volume2" Class="h-4 w-4 text-muted-foreground" />
            </Flex>
            <Lumeo.Text Size="sm" Color="muted" Align="center">Volume: @_volume%</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Range Slider" Code="@_rangeSliderCode">
        <Stack Gap="4" Class="w-full max-w-sm">
            <Slider IsRange="true" @bind-Value="_rangeStart" @bind-ValueEnd="_rangeEnd" Min="0" Max="100" />
            <Lumeo.Text Size="sm" Color="muted">Range: @_rangeStart — @_rangeEnd</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="With Tooltip" Code="@_tooltipCode">
        <Stack Gap="2" Class="w-full max-w-sm">
            <Slider @bind-Value="_tooltipValue" ShowTooltip="true" />
            <Lumeo.Text Size="sm" Color="muted">Hover over the slider to see the tooltip</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="With Marks" Code="@_marksCode">
        <Stack Gap="2" Class="w-full max-w-sm">
            <Slider @bind-Value="_marksValue" Min="0" Max="100" Step="25" Marks="@_marks" ShowTicks="true" />
            <Lumeo.Text Size="sm" Color="muted">Value: @_marksValue</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Custom Tooltip Format" Code="@_formatCode">
        <Stack Gap="2" Class="w-full max-w-sm">
            <Slider @bind-Value="_formatValue" Min="0" Max="100" ShowTooltip="true" FormatTooltip="@(v => $"{v}%")" />
            <Lumeo.Text Size="sm" Color="muted">Value: @_formatValue%</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Vertical Orientation" Code="@_verticalCode">
        <Container MaxWidth="xs" Center="false" Padding="" Class="h-[200px]">
            <Slider @bind-Value="_verticalValue" Orientation="Vertical" />
        </Container>
    </ComponentDemo>
</Stack>

<div class="mt-12">
    <Heading Id="keyboard-interactions" Level="2" Class="scroll-mt-20">Keyboard Interactions</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Key</TableHead>
                    <TableHead>Action</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell><Kbd>ArrowRight</Kbd></TableCell><TableCell>Increase the value by one step</TableCell></TableRow>
                <TableRow><TableCell><Kbd>ArrowLeft</Kbd></TableCell><TableCell>Decrease the value by one step</TableCell></TableRow>
                <TableRow><TableCell><Kbd>ArrowUp</Kbd></TableCell><TableCell>Increase the value by one step (vertical orientation)</TableCell></TableRow>
                <TableRow><TableCell><Kbd>ArrowDown</Kbd></TableCell><TableCell>Decrease the value by one step (vertical orientation)</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Home</Kbd></TableCell><TableCell>Set the value to the minimum</TableCell></TableRow>
                <TableRow><TableCell><Kbd>End</Kbd></TableCell><TableCell>Set the value to the maximum</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Tab</Kbd></TableCell><TableCell>Move focus to the slider thumb or next focusable element</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<Alert Variant="Alert.AlertVariant.Info" ShowIcon="true" Class="mt-6">
    <strong>Mobile (rc.49).</strong> The slider now uses unified pointer events (mouse, touch, and stylus pen all fire the same handlers) so dragging the thumb works correctly on touchscreens without any extra configuration.
</Alert>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>

    <Stack Gap="8" Class="mt-8">
        <Stack Gap="3">
            <Heading Level="3">Slider</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Value</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">double</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">0</td>
                            <td class="p-3 text-muted-foreground">Current value of the slider. Use with @@bind-Value for two-way binding.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ValueChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;double&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Callback invoked when the value changes.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Min</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">double</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">0</td>
                            <td class="p-3 text-muted-foreground">Minimum value of the range.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Max</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">double</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">100</td>
                            <td class="p-3 text-muted-foreground">Maximum value of the range.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Step</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">double</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">1</td>
                            <td class="p-3 text-muted-foreground">Increment step size between values.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Disabled</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">When true, prevents user interaction and dims the slider.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IsRange</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Enables dual-thumb range mode.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ValueEnd</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">double</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">75</td>
                            <td class="p-3 text-muted-foreground">End value for range slider. Use with @@bind-ValueEnd for two-way binding.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ValueEndChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;double&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Callback when end value changes.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Orientation</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">"Horizontal"</td>
                            <td class="p-3 text-muted-foreground">Orientation of the slider: "Horizontal" or "Vertical".</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShowTooltip</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Shows a tooltip with the current value on hover.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Marks</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">List&lt;double&gt;?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Custom mark positions to display along the slider track.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ShowTicks</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Shows tick marks at each mark position.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">FormatTooltip</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">Func&lt;double, string&gt;?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Custom formatter for tooltip and mark labels.</td>
                        </tr>
                                            <tr>
                            <td class="p-3 font-mono text-xs text-primary">Culture</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">CultureInfo?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Culture used for formatting tick labels and tooltips.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Required</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Marks the field as required. Syncs with a parent FormField.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Invalid</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Applies error styling. Syncs with a parent FormField.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ErrorText</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Error message displayed below the field when Invalid is true.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">HelperText</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Helper text shown below the field when not invalid.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Label</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Label rendered above the field (standalone, without FormField).</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Name</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">HTML name attribute for form submission.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">FormField</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">FormField.FormFieldContext?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Cascaded context from a parent FormField; wires label, validation, and required state automatically.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">AriaLabel</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">Accessible label announced by screen readers when no visible Label is set.</td>
                        </tr>
</tbody>
                </table>
            </Stack>
        </Stack>
    </Stack>
</Stack>

<div class="mt-12">
    <Heading Id="related" Level="2" Class="scroll-mt-20">Related Components</Heading>
    <ul class="mt-4 space-y-2 text-sm">
        <li><a href="/components/input" class="text-primary hover:underline">Input</a> — Use a numeric input when the user needs to type an exact value rather than drag</li>
        <li><a href="/components/progress" class="text-primary hover:underline">Progress</a> — Use to display a read-only progress bar rather than an interactive slider</li>
    </ul>
</div>

@code {
    private double _value1 = 50;
    private double _value2 = 500;
    private double _value3 = 5;
    private double _volume = 75;

    private string _defaultCode = @"<Slider @bind-Value=""_value"" />
<Lumeo.Text Size=""sm"" Color=""muted"">Value: @_value</Lumeo.Text>

@code {
    private double _value = 50;
}";

    private string _rangeCode = @"<Slider @bind-Value=""_value"" Min=""0"" Max=""1000"" Step=""50"" />

@code {
    private double _value = 500;
}";

    private string _stepCode = @"<Slider @bind-Value=""_value"" Min=""0"" Max=""10"" Step=""1"" />

@code {
    private double _value = 5;
}";

    private string _disabledCode = @"<Slider Value=""40"" Disabled=""true"" />";

    private string _volumeCode = @"<Flex Gap=""3"" Align=""center"">
    <Blazicon Svg=""Lucide.Volume1"" class=""h-4 w-4"" />
    <Slider @bind-Value=""_volume"" Min=""0"" Max=""100"" Step=""1"" />
    <Blazicon Svg=""Lucide.Volume2"" class=""h-4 w-4"" />
</Flex>

@code {
    private double _volume = 75;
}";

    private double _rangeStart = 25;
    private double _rangeEnd = 75;
    private double _tooltipValue = 50;
    private double _marksValue = 50;
    private double _formatValue = 65;
    private double _verticalValue = 50;
    private List<double> _marks = new() { 0, 25, 50, 75, 100 };

    private string _rangeSliderCode = @"<Slider IsRange=""true"" @bind-Value=""_rangeStart"" @bind-ValueEnd=""_rangeEnd"" Min=""0"" Max=""100"" />
<Lumeo.Text Size=""sm"" Color=""muted"">Range: @_rangeStart — @_rangeEnd</Lumeo.Text>

@code {
    private double _rangeStart = 25;
    private double _rangeEnd = 75;
}";

    private string _tooltipCode = @"<Slider @bind-Value=""_value"" ShowTooltip=""true"" />

@code {
    private double _value = 50;
}";

    private string _marksCode = @"<Slider @bind-Value=""_value"" Min=""0"" Max=""100"" Step=""25"" Marks=""@_marks"" ShowTicks=""true"" />

@code {
    private double _value = 50;
    private List<double> _marks = new() { 0, 25, 50, 75, 100 };
}";

    private string _formatCode = @"<Slider @bind-Value=""_value"" Min=""0"" Max=""100"" ShowTooltip=""true"" FormatTooltip=""@(v => $\""{v}%\"")"" />

@code {
    private double _value = 65;
}";

    private string _verticalCode = @"<div style=""height: 200px;"">
    <Slider @bind-Value=""_value"" Orientation=""Vertical"" />
</div>

@code {
    private double _value = 50;
}";
}
