<h4 class="mb-3">1. Basic Range Slider (int)</h4>
<p>A simple slider with default settings (Min=0, Max=100, Step=1), without explicit value display.</p>
<P11Range TValue="int"
          Label="Volume"
          Step="1"
          Description="Adjust the volume (0-100)."
          ShowDevelopmentErrors="false"
          @bind-Value="Volume" />
<p>Current Value: @Volume</p>

<h4 class="mb-3">2. Range Slider with Custom Min/Max/Step and Value Display (int)</h4>
<p>Slider from 1 to 10 with steps of 1. Since TValue is an integer, only whole steps are supported.</p>
<P11Range TValue="int"
          Label="Number of People"
          Min="1"
          Max="10"
          Step="1"
          ShowValue="true"
          @bind-Value="NumberOfPeople" />
<p>Current Value: @NumberOfPeople</p>

<h4 class="mb-3">3. Range Slider with Decimal Values and Value Display (double)</h4>
<p>Slider for floating-point numbers (0.0 to 1.0 with 0.01 steps).</p>
<P11Range TValue="double"
          Label="Zoom Factor"
          Min="0.0"
          Max="1.0"
          Step="0.01"
          ShowValue="true"
          @bind-Value="ZoomFactor" />
<p>Current Value: @ZoomFactor.ToString("F2")</p>

<br />
<br />

<p>
    Error Demonstration: This slider is intentionally configured to trigger an error because 'TValue' is set to 'uInt32', 
    but supported types are: int, long, double, float, decimal, byte, short.
</p>
<P11Range TValue="uint"
          Label="Error Slider"
          ShowValue="true"
          Step="1"
          @bind-Value="valueForError"
          ShowDevelopmentErrors="true" /> @* Ensure ShowDevelopmentErrors is true *@
<p>Current Value (String): @valueForError.ToString()</p>

<h4 class="mb-3">4. Disabled Range Slider</h4>
<p>A disabled slider.</p>
<P11Range TValue="int"
          Label="Disabled Slider"
          Step="1"
          @bind-Value="DisabledValue"
          Disabled="true"
          ShowValue="true" />
<p>Current Value: @DisabledValue</p>

<h4 class="mb-3">5. Range Slider with Additional Attributes</h4>
<p>A slider with custom attributes (e.g., <code>data-test</code>) and inline style. Inspect it in the browser's developer tools.</p>
<P11Range TValue="int"
          Label="With Extra Attribute"
          Step="1"
          @bind-Value="ExtraAttributeValue"
          @attributes='new Dictionary<string, object> { { "data-test", "custom-data" }, { "style", "background-color: #e6ffe6;" } }' />
<p>Current Value: @ExtraAttributeValue</p>

<br />
<br />

<p>An example of how to customize the range button via CSS using different vendor prefixes.</p>
<P11Range TValue="int"
          Label="Volume"
          Step="1"
          CssClass="my-range-class"
          Description="Adjust the volume (0-100)."
          ShowDevelopmentErrors="false"
          @bind-Value="Volume" />
<p>Current Value: @Volume</p>

<style>
    /* Chrome, Edge, Safari, Opera */
    .my-range-class input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: #ff4500;
        cursor: pointer;
        border: 2px solid #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    /* Firefox */
    .my-range-class input[type="range"]::-moz-range-thumb {
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: #ff4500;
        cursor: pointer;
        border: 2px solid #fff;
        box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    } 
</style>

<h4 class="mb-3">6. Range Slider with `AriaValueTextFormatter` (Decimal with Percentage)</h4>
<p>This slider formats its value as a percentage for screen readers (<code>aria-valuetext</code>). Verify this with a screen reader or in the browser's inspector.</p>
<P11Range TValue="decimal"
          Label="Progress"
          Min="0.0m"
          Max="1.0m"
          Step="0.05m"
          ShowValue="true"
          @bind-Value="Progress"
          AriaValueTextFormatter="@((value) => value is decimal d ? d.ToString("P0", CultureInfo.CurrentCulture) : "0%")" />
<p>Current Value: @Progress.ToString("P2")</p>

<h4 class="mb-3">7. ValueChanged Event Example</h4>
<p>This example demonstrates how to use the <code>ValueChanged</code> event to react to changes in the slider's value without using <code>@@bind-Value</code>.</p>
<p>Selected Value (via ValueChanged): <strong>@(SelectedRangeValue != null ? SelectedRangeValue.Value.ToString() : "N/A")</strong></p>
<p>Last ValueChanged Event Fired: <strong>@(LastRangeValueChangedEvent ?? "Never")</strong></p>

<P11Range TValue="int?"
          Label="Select a value (0-100)"
          Min="0"
          Max="100"
          Step="5"
          Value="@SelectedRangeValue"
          ValueChanged="(int? val) => HandleRangeValueChanged(val)"
          ShowValue="true"
          CssClass="mb-3" />