// Assuming P11Range is here // For CultureInfo in AriaValueTextFormatter // For validation attributes (though form is removed) // For ValidationFor

P11Range Component

The P11Range component provides an accessible and customizable range slider, wrapping the native HTML <input type="range"> element. It allows users to select a value within a specified numeric range, with options for visual feedback and integration with Blazor's validation system.

Note: The visual styling of native HTML range inputs can vary across browsers and operating systems. This component enhances functionality and accessibility, particularly with the AriaValueTextFormatter for screen reader support.

P11Range Component Examples

These examples demonstrate various configurations and functionalities of the P11Range component, showcasing its flexibility for different use cases.

1. Basic Range Slider (int)

A simple slider with default settings (Min=0, Max=100, Step=1), without explicit value display.

Volume

Adjust the volume (0-100).

Current Value: 50

Implementation


<P11Range TValue="int"
          Label="Lautstärke"
          Description="Stellen Sie die Lautstärke ein (0-100)."
          ShowDevelopmentErrors="false"
          @bind-Value="Volume" />
<p>Aktueller Wert: @Volume</p>


private int Volume { get; set; } = 50;

2. Range Slider with Custom Min/Max/Step and Value Display (int)

Slider from 1 to 10 with steps of 1. Since TValue is an integer, only whole steps are supported.

Number of People

Current Value: 3

Implementation


<P11Range TValue="int"
          Label="Anzahl der Personen"
          Min="1"
          Max="10"
          Step="1"
          ShowValue="true"
          @bind-Value="NumberOfPeople" />
<p>Aktueller Wert: @NumberOfPeople</p>


private int NumberOfPeople { get; set; } = 3;

3. Range Slider with Decimal Values and Value Display (double)

Slider for floating-point numbers (0.0 to 1.0 with 0.01 steps).

Zoom Factor

0.50

Current Value: 0.50

Implementation


<P11Range TValue="double"
          Label="Zoomfaktor"
          Min="0.0"
          Max="1.0"
          Step="0.01"
          ShowValue="true"
          @bind-Value="ZoomFactor" />
<p>Aktueller Wert: @ZoomFactor.ToString("F2")</p>


private double ZoomFactor { get; set; } = 0.5;

4. Disabled Range Slider

A disabled slider.

Disabled Slider

P11Range Configuration Error:

P11Range Configuration Error: 'Step' value (0) must be greater than 0.

This is only visible during development. Please correct the parameters or set ShowDevelopmentErrors = false to suppress this warning.

Current Value: 25

Implementation


<P11Range TValue="int"
          Label="Deaktivierter Regler"
          @bind-Value="DisabledValue"
          Disabled="true"
          ShowValue="true" />
<p>Aktueller Wert: @DisabledValue</p>


private int DisabledValue { get; set; } = 25;

5. Range Slider with Validation (Example)

This slider demonstrates how <code>ValidationFor</code> can be used to associate the component with a model property for validation purposes. While no full form validation is shown here, the parameter is correctly set up.

Temperature (30-70°C)

P11Range Configuration Error:

P11Range Configuration Error: 'Step' value (0) must be greater than 0.

This is only visible during development. Please correct the parameters or set ShowDevelopmentErrors = false to suppress this warning.

Current Value: 50

Implementation


<P11Range TValue="int"
          Label="Temperatur (30-70°C)"
          Min="0"
          Max="100"
          @bind-Value="Temperature"
          ValidationFor="@(() => Temperature)"
          ShowValue="true" />
<p>Aktueller Wert: @Temperature</p>


// For demonstration, we use a property with validation attributes.
// In a real application, this would typically be part of a larger model
// used within an EditForm for validation to take effect.
[Required(ErrorMessage = "Temperatur ist erforderlich.")]
[Range(30, 70, ErrorMessage = "Temperatur muss zwischen 30 und 70 liegen.")]
private int Temperature { get; set; } = 50;

6. Range Slider with Nullable Value (Example)

A slider with a nullable integer value. It can initially be null and allows values within a specified range.

Optional Satisfaction (1-5)

Current Value: null

Implementation


<P11Range TValue="int?"
          Label="Optionale Zufriedenheit (1-5)"
          Min="1"
          Max="5"
          @bind-Value="OptionalRating"
          ValidationFor="@(() => OptionalRating)"
          ShowValue="true" />
<p>Aktueller Wert: @(OptionalRating?.ToString() ?? "null")</p>


// For demonstration, we use a property with a validation attribute.
// In a real application, this would typically be part of a larger model
// used within an EditForm for validation to take effect.
[Range(1, 5, ErrorMessage = "Bewertung muss zwischen 1 und 5 liegen.")]
private int? OptionalRating { get; set; } = null; // Initially null

7. Range Slider with Additional Attributes

A slider with custom attributes (e.g., <code>data-test</code>) and inline style. Inspect it in the browser's developer tools.

With Extra Attribute

P11Range Configuration Error:

P11Range Configuration Error: 'Step' value (0) must be greater than 0.

This is only visible during development. Please correct the parameters or set ShowDevelopmentErrors = false to suppress this warning.

Current Value: 10

Implementation


<P11Range TValue="int"
          Label="Mit Extra-Attribut"
          @bind-Value="ExtraAttributeValue"
          @attributes='new Dictionary<string, object> { { "data-test", "custom-data" }, { "style", "background-color: #e6ffe6;" } }' />
<p>Aktueller Wert: @ExtraAttributeValue</p>


private int ExtraAttributeValue { get; set; } = 10;

8. Range Slider with `AriaValueTextFormatter` (Decimal with Percentage)

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.

Progress

0.25

Current Value: 25.00%

Implementation


<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>Aktueller Wert: @Progress.ToString("P2")</p>


private decimal Progress { get; set; } = 0.25m; // Example value for progress in percent

9. ValueChanged Event Example

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>.

Selected Value (via ValueChanged): 50

Last ValueChanged Event Fired: Never

Select a value (0-100)

Implementation


<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" />


private int? SelectedRangeValue { get; set; } = 50;
private string? LastRangeValueChangedEvent { get; set; }

private void HandleRangeValueChanged(int? newValue)
{
    SelectedRangeValue = newValue; // Manually update the bound value
    LastRangeValueChangedEvent = $"Value changed to: {newValue} at {DateTime.Now:HH:mm:ss}";
    Console.WriteLine($"Range value changed to: {newValue}");
}

Component API

Parameter	Type	Default	Description
`Label`	`string?`	`null`	Gets or sets the label text displayed next to the input field.
`Description`	`string?`	`null`	Gets or sets a descriptive text displayed below the input field.
`Disabled`	`bool`	`false`	Gets or sets a value indicating whether the input field is disabled.
`CssClass`	`string?`	`null`	Gets or sets custom CSS classes to be applied to the component's container div.
`ShowValue`	`bool`	`true`	Gets or sets whether to display the current numeric value next to the slider.
`ShowDevelopmentErrors`	`bool`	`true`	Gets or sets a value indicating whether development-time configuration errors should be displayed. Defaults to `true`. Set to `false` for production environments.
`Min`	`TValue`	`0` (or 0.0)	Gets or sets the minimum value for the range slider. Must be a numeric type matching `TValue`.
`Max`	`TValue`	`100` (or 1.0)	Gets or sets the maximum value for the range slider. Must be a numeric type matching `TValue`.
`Step`	`TValue?`	`null` (browser default)	Gets or sets the step value for the range slider. If `null`, the browser default step is used (typically 1 for integers, 0.01 for floats). Must be a numeric type matching `TValue`.
`Value`	`TValue?`	`null`	Gets or sets the current value of the range slider. Uses two-way binding.
`ValidationFor`	`Expression<Func<TValue>>?`	`null`	Gets or sets an expression that identifies the field for validation.
`AdditionalAttributes`	`Dictionary<string, object>?`	`null`	Captures all unmatched attributes that are not explicitly defined as component parameters. These attributes are applied to the component's container div.
`AriaValueTextFormatter`	`Func<TValue?, string>?`	`null`	Gets or sets a function that formats the current value into a human-readable string for the `aria-valuetext` attribute. If not provided, `aria-valuetext` is not set. The function receives the current value and should return the formatted string.
Events
`ValueChanged`	`EventCallback<TValue?>`	-	Event callback for when the `Value` changes. Used for two-way binding.