@page "/slider"
@page "/docs/guides/components/slider.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Slider
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>Slider</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos showcase a range slider with two-way data binding, configurable min/max values, step increments, range selection mode with two handles, disabled states, and vertical orientation for different layout needs.
</RadzenText>

<RadzenText Anchor="slider#get-set-value" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of Slider
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    As all Radzen Blazor input components the <strong>Slider</strong> has a Value property which gets and sets the value of the component. Use <code>@@bind-Value</code> to get the user input.
</RadzenText>
<RadzenExample ComponentName="Slider" Example="SliderBindValue">
    <SliderBindValue />
</RadzenExample>

<RadzenText  Anchor="slider#value-and-change-event"TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Get and Set the value of Slider using Value and Change event
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Value property can be used to set the value of the component and <code>Change</code> event to get the user input.
</RadzenText>
<RadzenExample ComponentName="Slider" Example="SliderChangeEvent">
    <SliderChangeEvent />
</RadzenExample>

<RadzenText Anchor="slider#min-max-value" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Slider from -100 to 100
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Min</code> and <code>Max</code> properties to define the minimum and maximum values for the slider range.
</RadzenText>
<RadzenExample ComponentName="Slider" Example="SliderMinMax">
    <SliderMinMax />
</RadzenExample>

<RadzenText Anchor="slider#step" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Slider with Step=10
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Step</code> property to define the increment/decrement value when moving the slider handle.
</RadzenText>
<RadzenExample ComponentName="Slider" Example="SliderStep">
    <SliderStep />
</RadzenExample>

<RadzenText Anchor="slider#range-slider" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Range Slider
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Range="true"</code> to enable range selection mode with two handles for selecting a value range.
</RadzenText>
<RadzenExample ComponentName="Slider" Example="SliderRange">
    <SliderRange />
</RadzenExample>

<RadzenText Anchor="slider#disabled-slider" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Disabled Slider
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Disabled="true"</code> to disable the Slider and prevent user interaction.
</RadzenText>
<RadzenExample ComponentName="Slider" Example="SliderDisabled">
    <SliderDisabled />
</RadzenExample>

<RadzenText Anchor="slider#vertical-slider" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Vertical Slider
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use <code>Orientation="Orientation.Vertical"</code> to display the Slider in a vertical orientation.
</RadzenText>
<RadzenExample ComponentName="Slider" Example="SliderVertical">
    <SliderVertical />
</RadzenExample>

<RadzenText Anchor="slider#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Keyboard Navigation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor Slider component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate to a Slider handle." },
        new KeyboardShortcut { Key = "RightArrow on a focused Slider handle", Action = "Increase the Slider value with the Step configured." },
        new KeyboardShortcut { Key = "LeftArrow on a focused Slider handle", Action = "Decrease the Slider value with the Step configured." }
    };
}
